# Schema not getting rendered for nested objects

**URL:** <https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345>\
**Category:** General\
**Created:** [February 22, 2023, 1:52pm UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345 "2023-02-22T13:52:07Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [February 22, 2023, 1:52pm UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/1 "2023-02-22T13:52:07Z")

</div>

Hi I am seeking help to get name, lastname and age renderered in ui which is under nested objects.  
i am able to render the id field with below data json but cant get rendered the name and other fields inside userdetails. I am trying to render it inside the table with this custom renderr for the array table renderer

```auto
{
 id : "12",
 address: [
  {
   roomNo : "345",
   userDetails: {
     "name" : "Ankit",
     "lastname" : "Pal",
     "age" : "NA"
    }
  }
 ]
}

```

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [February 22, 2023, 3:01pm UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/2 "2023-02-22T15:01:52Z")

</div>

I’m using jsonforms 2.5.2 with Angular

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [February 23, 2023, 4:36am UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/3 "2023-02-23T04:36:03Z")

</div>

I’ve made a stackblitz for this with schema, uischema and data json for reference in the below stackblitz  
i’m seeking help to get the number rendered in to the ui in a seperate column for table but couldnt see it getting rendered in ui . I am using custom component for table-renderer

> **[Angular 10 Starter Project (forked) - StackBlitz](https://stackblitz.com/edit/angular-10-starter-project-daidh-tcdsjf?file=src%2Fapp%2Fapp.component.ts)**
>
> A angular-cli project based on rxjs, tslib, zone.js, @angular/core, @angular/forms, @angular/common, @angular/router, @angular/compiler, @angular/animations, @angular/platform-browser and @angular/platform-browser-dynamic.

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [February 24, 2023, 11:17am UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/4 "2023-02-24T11:17:12Z")

</div>

This is actually a bug this shouldnt happen when i tried logging the routes and scoped schema noticed that it wasnt reading any of the scoped schemas for nested object anyways i fixed it thanks for looking

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [February 24, 2023, 11:40am UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/5 "2023-02-24T11:40:29Z")

</div>

Hi @howdyAnkit ,  
I’m glad you could solve your problem. In cae you are just starting out, I’d like to suggest using JsonForms 3.0, concretely the tag `v3.1.0-alpha.1`. This might fix the issue you had and also severely increased the performance of the angular renderers.

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [February 24, 2023, 2:12pm UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/6 "2023-02-24T14:12:08Z")

</div>

Thanks @lucas-koehler for mentioning also wanted to know the approach for one of below custom renderer

i want to build a custom renderer for a field let say for example firstname and lastname now this data comes speratley in backend. i want to map this to the schema json and uischema json. can you suggest me how can i achieve this and map this same data to custom renderer.

I’m assuming my firstname and lastname should have seperate schemas so that can bind together in custom ui but I cant think of a way how can i map in custom renderer should i apply this to value field in text ?

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [February 24, 2023, 2:26pm UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/7 "2023-02-24T14:26:12Z")

</div>

reading this again and i think i didnt explained the query above properly

I waant the firstname field and lastname field in a single fild as fullname in ui.

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [October 18, 2023, 7:01am UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/8 "2023-10-18T07:01:16Z")

</div>

Hi @sdirix and @lucas-koehler

I am using jsonforms@3.1.0  
Can you please help me render this data.json in to table. I am using this custom renderer and able to render data uptill now ([https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/src/other/table.renderer.ts](https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/src/other/table.renderer.ts))

now that i want to render some other data of below schema i have trouble rendering this nested scopedSchema data and cant find a way around this

```auto
{
 user: [
  {
    basciInfo: [ 
         { 
            "name" :"Ankit",
            "lastname" : "Pal" 
          },
     ],
    "sex" :"Male"
  },
 {
    basicInfo: [ 
         { 
            "name" :"NA",
            "lastname" : "NA" 
          },
     ],
    "sex" :"Female"
  } 
 ]
}

```

I am having trouble rendering the name and lastname in UI as this are nested array. and they come up as no Applicable renderer found when i try to bind the firstname to a input custom renderer it comes with input but data dosent get bind in the input for the table.

I am able to render the sex of a user easily without any changes

---

<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:** [October 18, 2023, 10:29am UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/9 "2023-10-18T10:29:40Z")

</div>

Please add more information as otherwise we are unable to help.

- Please post the code of your custom renderer
- Please post the JSON Schema and UI Schema used
- Please post error messages and/or screenshots

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [October 18, 2023, 10:55am UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/10 "2023-10-18T10:55:04Z")

</div>

Thanks @sdirix fore replying please find the below attached schema and uischema

```auto
{
    "definition": {
        "items": {
            "type": "object",
            "properties": {
                "user": {
                    "type": "array",
                    "items": {
                        "type": "object",
                        "properties": {
                            "contact": {
                                "type": "array",
                                "items": {
                                    "type": "object",
                                    "properties": {
                                        "email": {
                                            "type": "string"
                                        },
                                        "phoneNumber": {
                                            "type": "string"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    "type": "object",
    "properties" : {
        "userdata": {
            "type" : "array",
            "items": {
                "$ref": "#/definitions/items"
            }
        }
    }
}

```

UISCHEMA BELOW

```auto
{
    "type": "ListWithDetail",
    "scope" : "#/properties/userdata",
    "options": {
        "detail":{
            "type" : "VerticalLayout",
            "elements" : [
                {
                    "type": "HorizontalLayout",
                    "elements": [
                        {
                            "type": "Control",
                            "scope": "#/properties/user"
                        }
                    ]
                }
            ]
        }
    }
}

```

data.json

```auto
{
    "user": [
        {
            "contact": [
                {
                    "email" : "palankit",
                    "phoneNumber": "+91"
                }
            ],
            "sex" : "male"
        }
    ]
}

```

Now the sex male get’s binded and rendererd in the [custom renderer table](https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/src/other/table.renderer.ts)  
and but the nested structure data dosent get binded the whole code is similar to table custom renderer but having issues getting this email and phone number data rendererd and in the column input field it’s showing no renderer found

WARNING IN THE FIELD

` No Applicable renderer found`

In my view the path is not reaching there

---

<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:** [October 18, 2023, 2:27pm UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/11 "2023-10-18T14:27:47Z")

</div>

Hi @howdyAnkit,

I don’t understand what you are trying to achieve. The JSON Schema does not seem to declare the `sex` property.

The off-the-shelf array/table renderers work fine

 ![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/1f59452428c43d0b6e2406f7b632aec7502bfe46.png)

So if your custom renderer does not work, you should check what the difference is to the provided off-the-shelf-table renderer.

As you are running into a `No Applicable renderer found` error, some dispatched props do not fit together, i.e. the schema/uischema combination you are dispatching to for the nested props.

Edit: Adding a `sex` property to the JSON Schema like this

```json
{
    "definitions": {
        "items": {
            "type": "object",
            "properties": {
                "user": {
                    "type": "array",
                    "items": {
                        "type": "object",
                        "properties": {
                            "contact": {
                                "type": "array",
                                "items": {
                                    "type": "object",
                                    "properties": {
                                        "email": {
                                            "type": "string"
                                        },
                                        "phoneNumber": {
                                            "type": "string"
                                        }
                                    }
                                }
                            },
                            "sex": {
                              "type": "string"
                            }
                        }
                    }
                }
            }
        }
    },
    "type": "object",
    "properties" : {
        "userdata": {
            "type" : "array",
            "items": {
                "$ref": "#/definitions/items"
            }
        }
    }
}

```

also works fine with the off-the-shelf renderers

 ![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/8e1a5f189502eb4872d624f2f7290722c0a062de.png)

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [October 19, 2023, 4:32am UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/12 "2023-10-19T04:32:01Z")

</div>

Thanks @sdirix

for replying this is the look we are trying to avoid. I purely want to use the table renderer component.  
So that E-mail, Phone Number and Sex all come in same row . being the Email and Phone Number nested inside the object. they don’t appear in same line. but end up rendering Email and Phone Number on top of an existing table where as the Sex appears in normal line as normal Input.

I mostly think’s it’s due to code of getValidColumnProps which not able to go inside the nested fields and it just loops untill the root element such as sex which is at root of user. but since the contact is nested with array of objects it’s not able to deeply iterate throught it keys.

* * *

**2nd Question**

we also tried setting up array-renderer on top table renderer to make Email and Phone Number appear in same row. but the Email and phone Number are coming up as VerticalLayout instead of Horizontal Layout.

But since we are targeting user object which is itself an Array of objects for table renderer  
like this

```auto
{
    "type": "ListWithDetail",
    "scope" : "#/properties/userdata",
    "options": {
        "detail":{
            "type" : "VerticalLayout",
            "elements" : [
                {
                    "type": "HorizontalLayout",
                    "elements": [
                        {
                            "type": "Control",
                            "scope": "#/properties/user"
                        }
                    ]
                }
            ]
        }
    }
}

```

Are there any suggestions how can we make the User And Phone Number as HorizontalLayout instead of vertical layout  
Do you suggest that i use elements and options in the user ui-schema to make it render?

---

<div class="post-metadata">

**Author:** ![howdyAnkit](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/howdyankit/32/563_2.png) [@howdyAnkit](https://jsonforms.discourse.group/u/howdyAnkit)\
**Post date:** [October 20, 2023, 12:54pm UTC](https://jsonforms.discourse.group/t/schema-not-getting-rendered-for-nested-objects/1345/13 "2023-10-20T12:54:39Z")

</div>

Fixed it thanks for checking