Accessing nested JSON object with JQuery

Question

I am hesitant to ask this, because it has been asked so many times already, but I've yet to figure it out. I have what I think is a very simple nested JSON object that I would like to display in my html file.

JSON object is as follows:

{
    "data": {
        "listItem1": {
            "listName": "Goggles",
            "listType": "Face"
        },
        "listItem2": {
            "listName": "Gloves",
            "listType": "Hands"
        }
    }
}

And here is the JQuery in my html file:

$(document).ready(function(){
    $.getJSON('equipLists.json', processList); 
    function processList(data) {
        var infoHTML ="";

        $.each(data,function(listItem, listInfo) {
            infoHTML += "<p>" + listInfo.listName + "</p><br>";
        });
        $('#ppeList').html(infoHTML);
    }
});

#ppeList is just a div container in my html file. I know it's something simple, but I just can't for the life of me figure it out. Thanks for any help.

whats with the bold...

deW1
– deW1

2014-11-02 22:26:45 +00:00
Commented Nov 2, 2014 at 22:26 — deW1
– deW1, Commented Nov 2, 2014 at 22:26

nbrooks · Accepted Answer · 2014-11-02 22:41:43Z

There's a minor issue with how you're treating the JS object. Remember that at the top-level your object only has one property: data. If you want to reference anything below that level, you have to reference it by saying obj.data or obj["data"]. Also, minor note, <p> elements are block elements, so no need for the line break.

In your case, you have to manage this within the callback function (my example below does it inline, to avoid the AJAX call):

$.getJSON('equipLists.json', processList); 
function processList(obj) {
    var data = obj.data;
    ...
}

Runnable example below.

var obj = {
  "data": {
    "listItem1": {
      "listName": "Goggles",
      "listType": "Face"
    },
    "listItem2": {
      "listName": "Gloves",
      "listType": "Hands"
    }
  }
};

function processList(data) {
  var infoHTML = "";

  $.each(data, function(listItem, listInfo) {
    infoHTML += "<p>" + listInfo.listName + "</p>";
  });

  $('#ppeList').html(infoHTML);
}

$(function() {
  processList(obj.data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ppeList"></div>

Collectives™ on Stack Overflow

Accessing nested JSON object with JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related