show nested json data in treeview in javascript

Question

i have nested json data. i used the blow function.

var jsonSource={"error_code":0, "ext_info":{"name":{"firstName":"John","lastName":"Jonson","nickName":"JJ"}}};
 var obj=JSON.parse(jsonSource),returnValue;

 function showJson(obj){

     for(var key in obj){
        if(typeof obj[key]==='object'){
            returnValue+='<div>'+key+'/\n';
            showJson(obj[key]);
            returnValue+='</div>';
         } else{
            returnValue+=key+'equal'+obj[key]; 
         }  
     }
   docoument.getElementById('data').innerHTML=returnValue;
 }

as i said before , i have a large nested json data and when i parse it to showJson function ,it just shows one level of json data and puts others deep level of dataJson undefined. what should i do to resolve the problem?

You should check out http://stackoverflow.com/questions/883977/display-json-as-html — Itai Pelles, Feb 06 '16 at 12:14

Prashant Agrawal · Answer 1 · 2016-02-06T13:22:08.167

0

    // obj is the object to loop, ul is the ul to append lis to
    function loop(obj, ul) {
        $.each(obj, function(key, val) {
            if(val && typeof val === "object") { // object, call recursively
                var ul2 = $("<ul>").appendTo(
                    $("<li>").appendTo(ul)
                );

                loop(val, ul2);
            } else {
                $("<li>").text(val).appendTo(ul);
            }
        });
    }
      var ul = $("<ul>");
      var jsonSource={"error_code":0, "ext_info":{"name":{"firstName":"John","lastName":"Jonson","nickName":"JJ"}}};
      var data=JSON.parse(jsonSource)
      loop(data, ul);

      ul.addClass("my-new-list").appendTo('body');

edited Feb 06 '16 at 13:22

answered Feb 06 '16 at 12:06

Prashant Agrawal

660
9
24

thanks so much. i don't understand the part of your code:'... .....else{$('
',{ id:key}).text(val).appendTo(ul); i mean {id:key}. what is it? and one more question. if i save the specific part of data , e.g just firstName, what should i do?

Reza Asgari

Feb 06 '16 at 12:53

Yeah you can ignore that (I have edited the answer). I didn't get your second part of the question though. Can you be more specific – Prashant Agrawal Feb 06 '16 at 13:23

Nina Scholz · Answer 2 · 2016-02-06T12:28:27.873

Some of your problems:

jsonSource is already an object
you try to assign the returnValue in every call of showJson

Better to use a clean approach for looping and returning of the items:

var obj = { "error_code": 0, "ext_info": { "name": { "firstName": "John", "lastName": "Jonson", "nickName": "JJ" } } };

function showObj(obj) {
    return Object.keys(obj).map(function (k) {
        if (typeof obj[k] === 'object') {
            return k + ':<br><div style="margin-left: 25px;">' + showObj(obj[k]) + '</div>';
        }
        return k + ': ' + obj[k];
    }).join('<br>');
}

document.getElementById('data').innerHTML = showObj(obj);

<div id="data"></div>

score 0 · Answer 3 · answered Feb 06 '16 at 12:12

Recursive approach works more intuitively when done with actual return values. Have a look at https://jsfiddle.net/ughnjfh0/1/

var jsonSource='{"error_code":0, "ext_info":{"name":{"firstName":"John","lastName":"Jonson","nickName":"JJ"}}}';
 var obj=JSON.parse(jsonSource);

 function showJson(obj){
        var returnValue='';
     for(var key in obj){
        if(typeof obj[key]==='object'){
            returnValue+='<div>'+key+'/\n';
            returnValue+=showJson(obj[key]);
            returnValue+='</div>';
         } else{
            returnValue+=key+'equal'+obj[key]; 
         }  
     }
     return returnValue;
 }

document.getElementById('data').innerHTML= showJson(obj);

Also:

jsonSource should be a string to be properly parsable as JSON data
typo in docoument.getElementById('data').innerHTML=returnValue;

show nested json data in treeview in javascript

3 Answers3