how to iterate json data in html using jquery in tree view structure node

Question

I want to iterate JSON data in a tree view structure. For first level I am only able to iterate json value and for second third level failed to iterate the data next next level of data inside the parent array.

The way of declaring my key/value pairs in JSON may also be an issue because I am using the same 'title' keyword.

JSON

{  
           "category":[        
               {  
                 "title":"Customer Satisfaction", // first levl
                 "items":[  
                    {  
                       "title":"Bulletins", // second level
                       "id":"nnanet:category/customer-satisfaction/bulletins"
                    },
                    {  
                       "title":"Consumer Affairs", // second level
                       "id":"nnanet:category/customer-satisfaction/consumer-affairs"
                    },
                    {  
                       "title":"Loyalty",
                       "id":"nnanet:category/customer-satisfaction/loyalty"
                    },
                    {  
                       "title":"Reference Guide",
                       "id":"nnanet:category/customer-satisfaction/reference-guide"
                    },
                    {  
                       "title":"TOI",
                       "id":"nnanet:category/customer-satisfaction/toi"
                    }
                 ]
              },
              {  
                 "title":"Accessories",
                 "id":"nnanet:category/accessories"
              },
              {  
                 "title":"Certified Pre-Owned",
                 "id":"nnanet:category/certified-pre-owned"
              }

           ]
        }

HTML

<div id="all-id">
    <ul class="tree"></ul> // appending html code and json code inside this //
</div>

JavaScript

$.ajax({
    url: '../js/internal/json/documentListing.json',
    datatype: 'json',
    type: 'get',
    cache: 'false',
    success: function(data) {
        $.each(data.category, function(index, value) {
            console.log("Title :" + value.title + "," + "ID :" + value.id);
            var treeViewdata = "<li> <a href='#'>" + items.title + "</a> <ul> <li> <a href='#'>" +
                value.title + "</a> </ul> </li> </li>";
            $(treeViewdata).appendTo(".tree");
        });
    }
});

value.title is the first level of data showing and items.title is the second level of data to iterate. Here I am only getting issue and the condition is failing.

This is because the category array contains one item with a title "Customer Satisfaction" and that item contains a collection called items. So the bulk of those titles are nested under the first item — Corporalis
– Corporalis, Commented Aug 22, 2016 at 12:45
I guess the question is: should all titles (Bulletins onwards) be children of the Customer Satisfaction title, or should they all be one collection? Noticed the questions been reformatted, makes more sense now — Corporalis
– Corporalis, Commented Aug 22, 2016 at 12:55

Community · Accepted Answer · 2017-05-23 12:00:46Z

0

I used the link I supplied you in the comments along with this: https://stackoverflow.com/a/13347251/4045532.

The key thing is the use of this recursive method:

function json2html(json) {
var i, ret = document.createElement('ul'), li;
for( i in json) {
    li = ret.appendChild(document.createElement('li'));
    li.appendChild(document.createTextNode(i+": "));
    if( typeof json[i] === "object") li.appendChild(json2html(json[i]));
    else li.firstChild.nodeValue += json[i];
}
return ret;

}

The output can be seen here: https://jsfiddle.net/xkL03obg/

It's just one example of how you could achieve this. Hope it helps

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Aug 22, 2016 at 13:54

Corporalis

1,0721 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to iterate json data in html using jquery in tree view structure node

JSON

HTML

JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JSON

HTML

JavaScript

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related