How to display nested JSON object

Question

I have the following JSON output:

[
  {
    "meeting_team_members": [
      {
        "team_member_name": "teammember2",
        "team_member_email": "[email protected]",
        "full_image": "\/media\/no-image.png"
      }
    ],
    "meeting_time": "19:45:00",
    "meeting_title": "THIS IS MEETING 1",
    "meeting_date": "2015-08-04"
  },
  {
    "meeting_team_members": [
      {
        "team_member_name": "teammember2",
        "team_member_email": "[email protected]",
        "full_image": "\/media\/no-image.png"
      }
    ],
    "meeting_time": "19:45:00",
    "meeting_title": "THIS IS MEETING 2",
    "meeting_date": "2015-08-04"
  }
]

I am using jQuery getJSON to display the output in my html:

    $.getJSON( get_meetings_url, function( data ) {
        $('#json').empty();

        var items = [];

        $.each(data, function(index, value) {
            items.push("<li>"+value.meeting_title+" - "+value.meeting_team_members+"</li>");
        });
    });

However, when I try to call value.meeting_team_members in items_push it returns [object Object]. How do I iterate over the nested meeting_team_members?

EDIT

I'd like the HTML output to be as follows:

<ul>
<li>meeting_title</li>
<ul><li>meeting_team_members.team_member_name</li></ul>
</ul>

The same way you iterate over the outer data structure, with $.each. — Felix Kling
– Felix Kling, Commented Aug 4, 2015 at 22:18
@FelixKling thanks, so I would do that inside items.push( ##code here)? — alias51
– alias51, Commented Aug 4, 2015 at 22:19
Probably not. You first have to think about what you want to convert meeting_team_members to (i.e. how do you want to represent it in HTML?). That should be done before items.push. — Felix Kling
– Felix Kling, Commented Aug 4, 2015 at 22:21
Thanks, so say I want to keep it simple and have the output as per my edit, any ideas? — alias51
– alias51, Commented Aug 4, 2015 at 22:33

Ramireddy Ambati · Accepted Answer · 2015-08-05 05:01:23Z

Below is the working solution for your problem.

function ShowMeetings() {

        var data = [
                      {
                          "meeting_team_members": [
                          {
                              "team_member_name": "teammember2",
                              "team_member_email": "[email protected]",
                              "full_image": "\/media\/no-image.png"
                          }
                        ],
                          "meeting_time": "19:45:00",
                          "meeting_title": "THIS IS MEETING 1",
                          "meeting_date": "2015-08-04"
                      },
                      {
                          "meeting_team_members": [
                          {
                              "team_member_name": "teammember2",
                              "team_member_email": "[email protected]",
                              "full_image": "\/media\/no-image.png"
                          }
                        ],
                          "meeting_time": "19:45:00",
                          "meeting_title": "THIS IS MEETING 2",
                          "meeting_date": "2015-08-04"
                      }
                ];

        $('#json').empty();

        var ul = CreateMeetingsUL(data);

        $('#json').html(ul);
    }

function CreateMeetingsUL(data) {
        var ul = "<ul>";
        $.each(data, function (index, value) {
            ul += "<li>" + value.meeting_title + "</li>";
            ul += CreateTeamMembersUL(value.meeting_team_members);
        });
        ul += "</ul>";

        return ul;
    }

function CreateTeamMembersUL(data) {
        var ul = "<ul>";
        $.each(data, function (index, value) {
            ul += "<li>" + value.team_member_name + "</li>";
        });
        ul += "</ul>";

        return ul;
    }

alias51 · Accepted Answer · 2015-08-04 22:49:23Z

0

My answer for those who are interested:

    // create JSON
    $.getJSON( get_meetings_url, function( data ) {
        $('#json').empty();

        var items = []
        var team_items = []

        $.each(data, function(index, value) {
            items.push("<li>"+value.meeting_title+"</li>")

            $.each(value.meeting_team_members, function(index, value){
                items.push("<ul><li>"+value.team_member_name+"</li></ul>")
            });
        });


        if (items.length == 0){
            $('#json').html('<h2>Empty</h2>')
        }
        else{
            $('#json').html('<h2>Meetings</h2><ul>' + items.join("")+"</ul>")

        }

answered Aug 4, 2015 at 22:49

alias51

8,71822 gold badges109 silver badges189 bronze badges

Comments

Purag · Accepted Answer · 2015-08-04 23:01:52Z

0

You can use a library that does this already, like renderjson.

To implement it yourself, you could write a recursive function. If the element you're about to print is an array or object, you want to make a recursive call and print out that item's contents.

Turns out it's pretty simple:

function print_json(obj) {
    var ul = $("<ul>");

    for (var i in obj) {
        var li = $("<li>");

        li.append(document.createTextNode(i + ": "));

        if (typeof obj[i] === "object") {
            li.append(print_json(obj[i]));
        } else {
            li.append(document.createTextNode(obj[i]));
        }

        ul.append(li);
    }

    return ul;
}

Basically, if we ever call the function, we're expecting to get back a new ul element, so we create one at the start and append to it.

Then, we loop over each of the items in the given object. It could be an array, another object, or just a string, integer, or other primitive.

In each iteration, we want to create a new li. Then, we append the key (for arrays, it's the index; for objects, it's your specified key when instantiating the object). And finally, we check if the item we want to print is another object (the typeof an array evaluates to object, so it works for arrays, too). If it is, we call the function recursively on the object to get the ul for that.

If not, we just append the text node for the item itself.

Here it is in action.

edited Aug 4, 2015 at 23:01

answered Aug 4, 2015 at 22:21

Purag

17.1k4 gold badges57 silver badges78 bronze badges

2 Comments

alias51 Over a year ago

Thanks, could you give an example please?

Purag Over a year ago

@alias51: Edited with a basic example. It's pretty easy to modify it to fit your needs if necessary.

Collectives™ on Stack Overflow

How to display nested JSON object

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related