Question

I have a little ajax call to load json data into the DOM but it’s not working. When I look at the net tab I see that its loaded but no data is on the actual page. It just says [object Object]

   $.getJSON('json/redstone.json', function(data) {
   var items = [];

   $.each(data, function(key, val) {
       items.push('<li id="' + key + '">' + val + '</li>');
   });

   $('<ul/>', {
      'class': 'my-new-list',
       html: items.join('')
      }).appendTo('body');
   });

Here is my JSON

{
"allconfig": {
    "card.inserted": {
        "value": "Not Inserted",
            "type": "enum",
            "range": "",
            "clone": false,
            "archive": false,
            "access": "R"
    },
        "card.cisproc": {
        "value": "Processed",
            "type": "string",
            "range": "",
            "clone": false,
            "archive": false,
            "access": "R"
    },
        "card.mfgid": {
        "value": "",
            "type": "string",
            "range": "",
            "clone": false,
            "archive": false,
            "access": "R"
    }
}
}

Answer 1

val is actually an object in your JSON data. And if you do $.each over the data, you will only get the allconfig element. So you might want to enumerate over data.allconfig instead.

So you might want to display the val‘s value property instead, like this:

$.getJSON('json/redstone.json', function(data) {
var items = [];

$.each(data.allconfig, function(key, val) {
    items.push('<li id="' + key + '">' + val.value + '</li>');
});

$('<ul/>', {
   'class': 'my-new-list',
    html: items.join('')
   }).appendTo('body');
});

Here is a working jsFiddle