CODEWITHSUNDEEP
javascriptjsontreeview
user3464409
user3464409

Reputation: 69

JSON printing (treeview)

I have a complex json string that looks like this:

    {
    "id":"2016666",
    "dt":"2012",
    "object_extends":[
        {
             "extend1":{
                "id":"2016666",
                "dt":"2012",
                "active":"true",
                "object_extend":[
                    {
                        "extend2":
                        {
                            "id":"2016666",
                            "secondary":null
                        },
                        "extend3":
                         {
                            "id":"2016666",
                            "pet":"willy"
                         }

                    }
                ]
            }

        }
    ]
}

Now i want to print this like a tree, but when searching for days i have to modify the json(which is not a option). How can i print this in a treeview? I tried for loops but each extend can have other attributes then other objects. Hope somebody can help me with this!

Upvotes: 1

Views: 11315

Answers (1)

caslaner
caslaner

Reputation: 413

Can you check these out:

How to generate Treeview from JSON data using javascript

https://github.com/lmenezes/json-tree

https://github.com/liuwenchao/aha-tree

https://github.com/AlexLibs/niTree

https://github.com/tamirs9876/JSON.Tree.Builder -- one of my fav

I think visit this and use which you like:

https://github.com/search?utf8=%E2%9C%93&q=json+tree&type=Repositories&ref=searchresults

Edit For Your Request :

To remove the null nodes in https://github.com/tamirs9876/JSON.Tree.Builder -- one of my fav :

Cover line 8 with 

if(data[i] != null){
}

in JsonTreeBuilder.js

Last state of js file is like

.
.
var ul = $('<ul>');
            for (var i in data) {
                var li = $('<li>');
                if(data[i] != null){
                    ul.append(li.text(i).append(generateTree(data[i])));
                }
            }
.
.

Upvotes: 3

Related Questions