# Issue with rendering property in deeply nested json

**URL:** <https://jsonforms.discourse.group/t/issue-with-rendering-property-in-deeply-nested-json/2359>\
**Category:** General\
**Created:** [September 23, 2024, 9:18pm UTC](https://jsonforms.discourse.group/t/issue-with-rendering-property-in-deeply-nested-json/2359 "2024-09-23T21:18:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![faridguzman91](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/faridguzman91/32/1144_2.png) [@faridguzman91](https://jsonforms.discourse.group/u/faridguzman91)\
**Post date:** [September 23, 2024, 9:18pm UTC](https://jsonforms.discourse.group/t/issue-with-rendering-property-in-deeply-nested-json/2359/1 "2024-09-23T21:18:52Z")

</div>

im using the package jsonforms/vue-vanilla and i am currently trying to solve a rendering issue with my fetched schema from an api.  
what im trying to do is fetch a deeply nested oneOf property called resourceKindSpec and trying to merge it with the rest of the properties:

```auto
const fetchSchema = async () => {
  try {
    const schemaKey = 'CreateResource';

    // Fetch and resolve schema
    schema.value = await SchemaService.getSchemaByKey(schemaKey);

    // Log the allOf arrays to see the structure
    console.log('allOf[1]', schema.value.allOf[1]); // Additional properties
    console.log('allOf[0]', schema.value.allOf[0]); // Base properties and oneOf schemas

    // Extract properties from both allOf[0] and allOf[1]
    const baseProperties = schema.value.allOf[0].properties || {};
    const additionalProperties = schema.value.allOf[1].properties || {};

    // Get the oneOf schemas from allOf[0]
    const oneOfSchemas = schema.value.allOf[0].oneOf || [];
    console.log('oneOfSchemas', oneOfSchemas);

    // Find the matching schema based on x-quandago-resource-kind
    const matchingSpec = oneOfSchemas.find(
      (spec) => spec.properties?.spec['x-quandago-resource-kind'] === activeResourceKind.value
    );

    if (!matchingSpec) {
      console.warn(`No matching spec found for ${activeResourceKind.value}`);
      return;
    }

    // Extract the properties of the matched spec
    const resourceKindSpec = matchingSpec.properties.spec.properties || {};
    console.log('spec to be merged:', resourceKindSpec);
    
    // Merge the base, additional, and resourceKindSpec properties
    const mergedSchema = {
      ...schema.value.allOf[1], // Additional properties from allOf[1]
      properties: {
        ...baseProperties, // Base properties from allOf[0]
        ...additionalProperties, // Additional properties from allOf[1]
        ...resourceKindSpec, // Matched spec properties
      },
    };

    console.log('Merged schema:', mergedSchema);

    // Generate the UI schema for the merged schema
    uischema.value = generateUISchema(mergedSchema);
   
    // Handle the api_version dynamically
    const handleApiVersionChange = (selectedVersion) => {
      const mapping = schema.value.allOf[0].discriminator.mapping;
      const refSchema = mapping[selectedVersion];
      const specSchemaKey = refSchema.split('/').pop();
      fetchSpecSchema(specSchemaKey);
    };

    // Listen to changes in api_version
    onMounted(() => {
      watch(() => data.value.api_version, (newValue) => {
        if (newValue) {
          handleApiVersionChange(newValue);
        }
      });
    });

    // Generate UI schema for the matching oneOf schema
    const oneOfUISchema = generateUISchema(matchingSpec);
    uischema.value.elements.push(oneOfUISchema);
    
    console.log('Final UI schema:', uischema.value);

  } catch (error) {
    console.error('Error fetching schema:', error);
  } finally {
    isLoading.value = false;
  }
};

```

the schema generator is as follows:

```auto
const generateUISchema = (schema) => {
  const uiElements = Object.keys(schema.properties).map((propertyKey) => {
    return {
      type: 'Control',
      scope: `#/properties/${propertyKey}`,
    };
  });

  // Add `api_version` if it's a required field and not in the properties
  if (schema.required && schema.required.includes('api_version')) {
    uiElements.unshift({
      type: 'Control',
      scope: '#/properties/api_version',
      options: {
        enum: [
          'interactions/v1',
          'sbc/v1',
          'trunk/v1',
          'transformationRules/v1',
          'inboundRoutingRule/v1',
          'outboundRoutingRule/v1',
        ],
      },
    });
  }

  // Debugging UI Elements
  console.log('Generated UI Elements:', uiElements);

  return {
    type: 'VerticalLayout',
    elements: uiElements,
  };
};

```

the ui schema after merging is as follows:

```auto
[
    {
        "type": "Control",
        "scope": "#/properties/display_name",
        "options": {
            "type": "text",
            "validation": {
                "minLength": 3
            }
        },
        "label": "display_name"
    },
    {
        "type": "Control",
        "scope": "#/properties/description",
        "options": {
            "type": "text",
            "validation": {
                "maxLength": 512
            }
        },
        "label": "description"
    },
    {
        "type": "Control",
        "scope": "#/properties/api_version",
        "options": {
            "type": "text"
        },
        "label": "api_version"
    },
    {
        "type": "Control",
        "scope": "#/properties/tags",
        "options": {},
        "label": "tags"
    },
    {
        "type": "Control",
        "scope": "#/properties/account_id",
        "options": {
            "type": "text"
        },
        "label": "account_id"
    },
    {
        "type": "Control",
        "scope": "#/properties/kind",
        "options": {
            "type": "text"
        },
        "label": "kind"
    },
    {
        "type": "Control",
        "scope": "#/properties/name",
        "options": {
            "type": "text",
            "validation": {
                "maxLength": 64,
                "minLength": 3,
                "pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*$"
            }
        },
        "label": "name"
    },
    {
        "type": "Control",
        "scope": "#/properties/environment",
        "options": {
            "type": "text",
            "validation": {
                "maxLength": 64,
                "minLength": 3,
                "pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*$"
            }
        },
        "label": "environment"
    },
    {
        "type": "Control",
        "scope": "#/properties/capacity",
        "options": {
            "type": "number"
        },
        "label": "capacity"
    },
    {
        "type": "Control",
        "scope": "#/properties/classic",
        "options": {
            "type": "checkbox"
        },
        "label": "classic"
    },
    {
        "type": "Control",
        "scope": "#/properties/domain",
        "options": {
            "type": "text",
            "validation": {
                "maxLength": 255,
                "minLength": 3,
                "pattern": "(?=^.{4,253}$)(^((?!-)[a-zA-Z0-9-]{1,63}(?<!-)\\.)+[a-zA-Z]{2,63}$)"
            }
        },
        "label": "domain"
    },
    {
        "type": "Control",
        "scope": "#/properties/tenant_guid",
        "options": {
            "type": "text",
            "validation": {
                "maxLength": 32,
                "minLength": 32,
                "pattern": "^[0-9a-f]+$"
            }
        },
        "label": "tenant_guid"
    },
    {
        "type": "Control",
        "scope": "#/properties/tenant_shortname",
        "options": {
            "type": "text",
            "validation": {
                "maxLength": 16,
                "minLength": 1,
                "pattern": "^[a-z]+$"
            }
        },
        "label": "tenant_shortname"
    }
]

```

somehow the labels ‘`capacity`’ until '`tenant_shortname'` are not being rendered:

i only see this text in their place:

No applicable renderer found.  
No applicable renderer found.  
No applicable renderer found.  
No applicable renderer found.  
No applicable renderer found.

is there something wrong with how i generated the schema?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [September 24, 2024, 7:55am UTC](https://jsonforms.discourse.group/t/issue-with-rendering-property-in-deeply-nested-json/2359/2 "2024-09-24T07:55:25Z")

</div>

Hi @faridguzman91,

To determine what is going wrong, you need to post the full JSON Schema and UI Schema as handed over to JSON Forms. Only then it will be apparent why “No applicable renderer found” is returned.

* * *

Some things which caught my eye:

> [@faridguzman91](#):
>
> ```auto
> const uiElements = Object.keys(schema.properties).map((propertyKey) => {
> return {
> type: 'Control',
> scope: `#/properties/${propertyKey}`,
> };
> });
> 
> ```

This looks like the same logic as in our default UI Schema generator. If all you want is a `VerticalLayout` with a control for each property, then there is no need to manage a UI Schema at all.

> [@faridguzman91](#):
>
> ```auto
> // Add `api_version` if it's a required field and not in the properties
> if (schema.required && schema.required.includes('api_version')) {
> uiElements.unshift({
> type: 'Control',
> 
> ```

This seems weird. If a property is not listed in the `properties`, then you can’t add a UI Schema element for it. If a control points to a scope in the `schema` which does not exist, then “No applicable renderer” will be rendered by default. Only custom renderers could recover that.

> [@faridguzman91](#):
>
> the ui schema after merging is as follows:
> 
> ```auto
> [
> {
> 
> ```

In your UI schema generator you are returning a `VerticalLayout`, however you posted an array as your UI Schema. I guess that’s just a copy mistake?

> [@faridguzman91](#):
>
> ```auto
> "options": {
> "type": "text",
> "validation": {
> "minLength": 3
> }
> },
> 
> ```

- Where are all these options coming from? In your UI Schema generator you did not have them.
- The options listed here look like properties which should be in the JSON Schema, why are they replicated here?
- Do you use custom renderers? The off-the-shelf renderers will ignore all these options as they don’t know them

> [@faridguzman91](#):
>
> somehow the labels ‘`capacity`’ until '`tenant_shortname'` are not being rendered:

Do the respective properties exist in the used JSON Schema?

---

<div class="post-metadata">

**Author:** ![faridguzman91](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/faridguzman91/32/1144_2.png) [@faridguzman91](https://jsonforms.discourse.group/u/faridguzman91)\
**Post date:** [November 5, 2024, 11:40am UTC](https://jsonforms.discourse.group/t/issue-with-rendering-property-in-deeply-nested-json/2359/3 "2024-11-05T11:40:10Z")

</div>

Hello Stefan,

I manage to solve my issue, however there is another issue popping up regarding the `Trunk` and the `TransformationRules` schema. see full schema below:

> **[Vitejs - Vite (forked) - StackBlitz](https://stackblitz.com/edit/vitejs-vite-wzbaop?file=src%2Fschema%2Fschema.json)**
>
> Next generation frontend tooling. It's fast!

the forms are being rendered in the ResourcesForm.vue file.

I get the following error:

 ![Screenshot from 2024-11-05 10-57-05](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/7/779ffa98e90d222cbd165d35aac1d467d835fd44.png)

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 5, 2024, 12:22pm UTC](https://jsonforms.discourse.group/t/issue-with-rendering-property-in-deeply-nested-json/2359/4 "2024-11-05T12:22:13Z")

</div>

Your StackBlitz does not work as it seemingly expects some service to run on `localhost:8111`.

However judging from the error message [the translations do not seem to work for you](https://github.com/eclipsesource/jsonforms/blob/fcef896c8927269d3f3ed609a7255651085b193d/packages/vue-vanilla/src/array/ArrayListRenderer.vue#L113-L122). You should check what is happening there for you.

---

<div class="post-metadata">

**Author:** ![faridguzman91](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/faridguzman91/32/1144_2.png) [@faridguzman91](https://jsonforms.discourse.group/u/faridguzman91)\
**Post date:** [November 5, 2024, 12:43pm UTC](https://jsonforms.discourse.group/t/issue-with-rendering-property-in-deeply-nested-json/2359/5 "2024-11-05T12:43:46Z")

</div>

Sorry about that.It should be fixed now. The issue is mainly when you go to either, Transformation Rules tab Or Trunk Tab, and make a New resource. Im getting that error when i fetch the schema data. I am also using a local schema.json instead of the server url , maybe there are issues there, or perhaps a renderer issue. According to the spec there should be a ‘cidr\_block’ rendering in the form

i tried it using vuetify and vue-vuetify and has the same issue  
[https://stackblitz.com/~/github.com/faridguzman91/jsonforms-vuetify](https://stackblitz.com/~/github.com/faridguzman91/jsonforms-vuetify)

---

<div class="post-metadata">

**Author:** ![faridguzman91](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/faridguzman91/32/1144_2.png) [@faridguzman91](https://jsonforms.discourse.group/u/faridguzman91)\
**Post date:** [November 6, 2024, 11:47am UTC](https://jsonforms.discourse.group/t/issue-with-rendering-property-in-deeply-nested-json/2359/6 "2024-11-06T11:47:20Z")

</div>

i somehow fixed it by making my own ArrayListRenderer.vue component and its dependancies, i followed [this example](https://jsonforms.discourse.group/t/customize-array-control-to-render-uikit-accordion/907)