# Array nested inside Object

**URL:** <https://jsonforms.discourse.group/t/array-nested-inside-object/2596>\
**Category:** General\
**Created:** [February 10, 2025, 7:55am UTC](https://jsonforms.discourse.group/t/array-nested-inside-object/2596 "2025-02-10T07:55:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pheoniX](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@pheoniX](https://jsonforms.discourse.group/u/pheoniX)\
**Post date:** [February 10, 2025, 7:55am UTC](https://jsonforms.discourse.group/t/array-nested-inside-object/2596/1 "2025-02-10T07:55:28Z")

</div>

I have a schema with the following nesting. array → object → object → array I am able to render upto the last object but unable to render the array nested inside the object.

---

<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:** [February 10, 2025, 8:52am UTC](https://jsonforms.discourse.group/t/array-nested-inside-object/2596/2 "2025-02-10T08:52:28Z")

</div>

Hi @pheoniX,

Generally speaking JSON Forms supports arbitrary nesting. Please post your `schema` and `uischema` and which renderer set you are using in which version.

---

<div class="post-metadata">

**Author:** ![pheoniX](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@pheoniX](https://jsonforms.discourse.group/u/pheoniX)\
**Post date:** [February 10, 2025, 9:17am UTC](https://jsonforms.discourse.group/t/array-nested-inside-object/2596/3 "2025-02-10T09:17:07Z")

</div>

Hi @sdirix, So basically I took the vanilla package and updated it according to my requirements.  
Now, the situations is that in my InputControl I’m using recursion for rendering nested objects and if there the type gets array, then I’m using JsonFormsDispatch to render the TableArrayControl. But the issue is that the path value which I’m sending as props to the JsonFormsDispatch and the path value inside the TableArrayControl is different and also different then what is expected as per the rootSchema.  
So, Is there any way to modify the path in between that?  
Following is the schema and uiSchema resp.  
{  
“type”: “object”,  
“properties”: {  
“CPNFSimulator”: {  
“type”: “array”,  
“items”: {  
“type”: “object”,  
“properties”: {  
“receive”: {  
“type”: “object”,  
“properties”: {  
“messageID”: {  
“type”: “string”  
},  
“validate”: {  
“type”: “object”,  
“properties”: {  
“statusCode”: {  
“type”: “array”,  
“items”: {  
“type”: “integer”  
}  
}  
}  
}  
}  
},  
“send”: {  
“type”: “object”,  
“properties”: {  
“messageID”: {  
“type”: “string”  
},  
“method”: {  
“type”: “string”  
},  
“url”: {  
“type”: “string”  
}  
}  
}  
}  
}  
},  
“regalSpecificConfig”: {  
“type”: “object”,  
“properties”: {  
“tcIterationCount”: {  
“type”: “integer”  
}  
}  
},  
“statsResult”: {  
“type”: “array”,  
“items”: {}  
}  
},  
“required”:   
}

{  
“type”: “Categorization”,  
“elements”: [  
{  
“type”: “Category”,  
“label”: “General”,  
“elements”: [  
{  
“type”: “HorizontalLayout”,  
“elements”: [  
{  
“type”: “Control”,  
“scope”: “#/properties/CPNFSimulator”,  
“label”: “CPNFSimulator”,  
“options”: {  
“multi”: true  
}  
},  
{  
“type”: “Control”,  
“scope”: “#/properties/statsResult”,  
“label”: “StatsResult”,  
“options”: {  
“multi”: true  
}  
}  
]  
}  
]  
},  
{  
“type”: “Category”,  
“label”: “RegalSpecificConfig”,  
“elements”: [  
{  
“type”: “HorizontalLayout”,  
“elements”: [  
{  
“type”: “Control”,  
“scope”: “#/properties/regalSpecificConfig”,  
“label”: “RegalSpecificConfig”  
}  
]  
}  
]  
}  
]  
}

---

<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:** [February 10, 2025, 3:23pm UTC](https://jsonforms.discourse.group/t/array-nested-inside-object/2596/4 "2025-02-10T15:23:15Z")

</div>

The React Vanilla renderers currently have the limitation that they don’t have an object renderer.

So once a control points to an object, which will happen by default in the `object -> object` case, the default React Vanilla renderers will fail.

However an object renderer is easily added as it’s straightforward to implement one. One can basically copy [the one of the Material UI renderer set](https://github.com/eclipsesource/jsonforms/blob/903cef708160d1e303222c2338dcecb8a8bf2037/packages/material-renderers/src/complex/MaterialObjectRenderer.tsx) and adapt it for React Vanilla.

> [@pheoniX](#):
>
> So basically I took the vanilla package and updated it according to my requirements.

Once you have custom renderers in place it’s difficult to help without their code as you can basically do arbitrary logic in them.