Displaying data from nested json in kendo UI grid for angular

[Sanjiv]

[{
"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

 

[Martin Bechev]

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