CODEWITHSUNDEEP
javascriptjqueryjson
Daniel Theman
Daniel Theman

Reputation: 145

Display multi level nested JSON data with JavaScript and jQuery

My original project had only one level of JSON data but it has grown and I need a second nested layer.

From what I researched it seemed that I could simply take the original object.name and append it with the new member level I needed to create like object.members.name. However this spits back an error undefined.

Clearly something is wrong or missing and I've been scratching my head for a while now.

I checked my JSON formatting a bunch of times and ran it through a validator (which checked out OK), no errors show up in the console and any search I make seems to bring up a much more complicated scenario then mine. I can't seem to narrow down what the problem is.

Any help or direction is much appreciated!

Here are the code blocks:

Non working multi level JSON data version

var obj = 
{ 
  "results": [
    { 				
        "members": [
          { 	
          "name": "John Smith", 
          "state": "NY", 
          "phone": "555-555-1111"
        },
        {
          "name": "Mary Jones", 
          "state": "PA", 
          "phone": "555-555-2222"
        }, 
        {
          "name": "Edward Edwards", 
          "state": "NY", 
          "phone": "555-555-3333"
        }, 
        {
          "name": "Abby Abberson", 
          "state": "RI", 
          "phone": "555-555-4444"
        } 
      ]
    }
  ]
};


$(obj.results).each(function(k,object){

  var output = $("div.output");
  output.append(object.members.name + " ");
  output.append(object.members.phone + "<br />");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

Working single level JSON data version

var obj = { 
  "results": [

      { 	
      "name": "John Smith", 
      "state": "NY", 
      "phone": "555-555-1111"
    },
    {
      "name": "Mary Jones", 
      "state": "PA", 
      "phone": "555-555-2222"
    }, 
    {
      "name": "Edward Edwards", 
      "state": "NY", 
      "phone": "555-555-3333"
    }, 
    {
      "name": "Abby Abberson", 
      "state": "RI", 
      "phone": "555-555-4444"
    } 

  ]
};


$(obj.results).each(function(k,object){

  var output = $("div.output");
  output.append(object.name + " ");
  output.append(object.phone + "<br />");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

Upvotes: 0

Views: 707

Answers (1)

Snowmonkey
Snowmonkey

Reputation: 3761

Nest your each statements?

var obj = {
  "results": [{
    "members": [{
        "name": "John Smith",
        "state": "NY",
        "phone": "555-555-1111"
      },
      {
        "name": "Mary Jones",
        "state": "PA",
        "phone": "555-555-2222"
      },
      {
        "name": "Edward Edwards",
        "state": "NY",
        "phone": "555-555-3333"
      },
      {
        "name": "Abby Abberson",
        "state": "RI",
        "phone": "555-555-4444"
      }
    ]
  }]
};


$(obj.results).each(function(k, result) {

  var output = $("div.output");
  $(result.members).each(function(index, member) {
    output.append(member.name + " ");
    output.append(member.phone + "<br />");
  })

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output">

</div>

Of course, I'd avoid using names like 'object' or 'obj' -- use result and member instead. Far more mnemonic. You'll know exactly what it refers to.

Upvotes: 2

Related Questions