Traverse and print nested JSON data

Question

I have a file with JSON data in a nested format. I want to traverse through this data and output it in the form of a JQuery listview but am unable to do so.

The JSON data is in this format:

{
  "Name":"A",
  "Company": "B",
  "Address": {
    "Street":"ABC",
    "City":"XYZ"
  }
}

I tried the following:

$.each(data, function(key,value) {
   $('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+value+'</span></li>');
});

but this does not output the 'Address' block properly.

What kind of outcome do you expect? – Chao Zhang Aug 21 '12 at 03:19 — Chao Zhang, Aug 21 '12 at 03:19

swemon · Answer 1 · 2012-08-22T03:27:25.623

How about using value.Address.City and value.Address.Street?? The most common way to access JSON data is through dot notation. This is simply the object name followed by a period and then followed by the name/property you would like to access. http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29

For example,

$.each(data, function(key,value) {
    $('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+ value.Address.Street + "," + value.Address.City +'</span></li>');
});

For detail coding,

<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function display(data) {
            $.each(data, function(key,value) {
                $('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+ value.Address.Street + "," + value.Address.City +'</span></li>');
            });
        }
        $(document).ready(function() {
            var data = [
                {
                    "Name" : "ABC",
                    "Company" : "AA Company",
                    "Address" : {
                        "Street" : "123 Main Street",
                        "City" : "Yangon"
                    }
                },
                {
                    "Name" : "DEF",
                    "Company" : "BB Company",
                    "Address" : {
                        "Street" : "8941 Mandalay",
                        "City" : "NaypiDaw"
                    }
                }           
            ];
        display(data);
        });
    </script>
</head>
<body>
<div id="companyDetails"></div>
</body>
</html>

For you case that you do not know which data are in json file,

function display(data,flag) {
    $.each(data, function(key,value) {
    if ($.isPlainObject(value)) {
        if(flag == true)
        {
            $('#companyDetails').append('<b>' + "Company " + (key + 1) + '</b>');
        }
        display(value,false);
    }
    else
        $('#companyDetails').append('<li>' + key +  " : " +'<span class="ui-li-aside">'+ value +'</span></li>');
    });
}

In calling display function,

var flag = true;
display(data,flag);

Your output would be enter image description here I hope this would help.

This absolutely works AS IS. This should be your accepted answer. — Chase Florell, Aug 21 '12 at 18:31
No, this is when I know what data is present inside my JSON file. I want to write a function that simply outputs/prints all the values inside the JSON file. I need not know what type of data is present or what the value of each key is. I hope you got my question now. — user1534235, Aug 21 '12 at 20:08
I know what you mean, but I want to know your expected format to show. — swemon, Aug 22 '12 at 03:08

j.w.r · Accepted Answer · 2012-08-21T04:01:59.287

I don't know if this is the most efficient way of doing this but I think it does what you want.

Assumptions: Data is an array, with each array element being an object (hash). Tested in Chrome on Windows only.

<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function read_record(data) {
            $.each(data, function(key,value) {
                if ($.isPlainObject(value))
                    read_record(value);
                else
                    $('#details').append('<li>' + key + ' = ' + value + '</li>');
            });
        }

        $(document).ready(function() {
            var data = [
                {
                    "Name" : "John",
                    "Company" : "Doe",
                    "Address" : {
                        "Street" : "123 Main Street",
                        "City" : "San Francisco"
                    }
                },
                {
                    "Name" : "Jane",
                    "Company" : "Johnson",
                    "Address" : {
                        "Street" : "57 Heinz Lane",
                        "City" : "Dallas"
                    }
                }           
            ];

            read_record(data);
        });
    </script>
</head>
<body>
<ul id="details"></ul>
</body>
</html>

Produces:

Name = John
Company = Doe
Street = 123 Main Street
City = San Francisco
Name = Jane
Company = Johnson
Street = 57 Heinz Lane
City = Dallas

Traverse and print nested JSON data

2 Answers2

Linked