Displaying data from nested json in kendo UI grid for angular

1 Answer 214 Views
Grid
Sanjiv
Top achievements
Rank 1
Sanjiv asked on 27 Apr 2021, 06:34 PM | edited on 28 Apr 2021, 09:44 PM

[{
"drpt": {
"dname": "test",
"cname": ["aaa", "bbb ", "ccc "],
"qgate": "passed",
"utest": {
"pass": 222,
"fail": 9,
"perc": 56.6
},
"ctest": {
"pass": 202,
"fail": 0,
"perc": 100
}
}
},
{
"drpt": {
"dname": "test1",
"cname": ["aaa1", "bbb1", "ccc1"],
"qgate": "failed",
"utest": {
"pass": 232,
"fail": 9,
"perc": 56.6
},
"ctest": {
"pass": 202,
"fail": 10,
"perc": 45
}
}
}
]

how do I parse this nested JSON to display the below data in the Kendo UI grid for angular?

dname UtestPerc CtestPerc qgate
test 56.6 100 passed
Test1 56.6 45 failed

can anyone help to give some pointers on this

 

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 30 Apr 2021, 07:46 AM

Hello Sanjiv,

In general, the Grid itself can be bound via its [data] input property to an array or object of type GridDataResult:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/

Binding the Grid to a json file directly isn't a supported feature. Instead what should be done is to convert the json file to a variable that can be further passed to the Grid. Please check some of the online available resources on the topic demonstrating how to load a local JSON file into a variable in JavaScript:

https://stackoverflow.com/questions/14484613/load-local-json-file-into-variable

Please note that the [data] input property of the Grid supports only one level arrays or objects of type GridDataResult, where the data property is supposed to be a one level array.

In case there are more levels of arrays then the Grid won't be able to represent the data as desired. Thus, I would suggest reconstructing the data so that it consists of a single array level and then define the desired Grid columns.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Sanjiv
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or