Click here to Skip to main content
15,741,981 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have an API which returns Json in the below format. I need to read this Json and display the items in a tree structure in Kendo UI.

$id: "35"
name: ""
category: ""
$id: "36"
name: "api.jobSchedules.aggregateReadRates.cancel"
category: "api.jobSchedules.aggregateReadRates"
For the above JSON, the UI should be created in the below way in kendo UI dynamically.

API ---jobSchedules --------aggregateReadRates -------------------Cancel

Can anyone please help.
Sergey Alexandrovich Kryukov 2-Dec-15 16:10pm    
Kendo UI, AngularJS, it's all JavaScript. JSON is JavaScript format, you can use JSON data directly in JavaScript (say, via eval), but using JSON native object is recommended to deserialize a string into some JavaScript object, mostly for safety reasons. So, you really don't need to do anything. You just traverse JSON data object recursively and do whatever your want with the data.
There is no such thing as TreeView in JavaScript, but there are different control elements which implement it based on usual HTML elements. Again, just use them.

So, help with what, exactly? What have you tried so far?

If you have some concerns, I'll try to help you; it looks pretty simple problem.

Phanindra257 2-Dec-15 16:33pm    
The problem is to parse through each level and add it to the kendo tree dynamically.

name: "api.jobSchedules.aggregateReadRates.cancel".
Sergey Alexandrovich Kryukov 2-Dec-15 16:40pm    
Why? You parse the whole JSON-formatting string using JSON.parse, that's all... And then use for... in loop.
Phanindra257 2-Dec-15 16:42pm    
Yes. But I need to parse it and then dynamically add them to the Kendo Tree view

1 solution

Kendo UI's TreeView can be bounded to multi-level JSON easily - you only have to follow the guides in the documentation...
See this demo to understand how to built your JSON data:[^]
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900