getJSON displays [object Object] rather than actual values

Question

I have a JSON and I need to get this JSON and put in the html as a ul li list. It gets the value as object and displays [object Object] in html. If I modify the json then it works. so there is probably something wrong in my script where I am not able to loop throught he json file properly. Can some one help please:

MY JSON IS:

[
    {
        "us":"USA"  
    },
    {
        "fr":"FRANCE"
    },
    {
        "es":"Spain"
    },
    {
        "sa":"South Africa"
    }
]

AND JS IS

<script>
  $.getJSON('jsonfile', function(data) {
    var items = [];
    $.each(data ,function(key,val) {
      items.push('<li id="'+ key +'">' + val +'</li>');
    });
    $('<ul />' , {
      'class':'new-div',
      html:items.join('')
    }).appendTo('body');
  });
</script>

UPDATED JSON:

[
{
    "items":
        {
            "item":
                [
                    {
                        "id": "0001",
                        "type": "donut",
                        "name": "Cake",
                        "ppu": 0.55,
                        "batters":
                            {
                                "batter":
                                    [
                                        { "id": "1001", "type": "Regular" },
                                        { "id": "1002", "type": "Chocolate" },
                                        { "id": "1003", "type": "Blueberry" },
                                        { "id": "1004", "type": "Devil's Food" }
                                    ]
                            },
                        "topping":
                            [
                                { "id": "5001", "type": "None" },
                                { "id": "5002", "type": "Glazed" },
                                { "id": "5005", "type": "Sugar" },
                                { "id": "5007", "type": "Powdered Sugar" },
                                { "id": "5006", "type": "Chocolate with Sprinkles" },
                                { "id": "5003", "type": "Chocolate" },
                                { "id": "5004", "type": "Maple" }
                            ]
                    }


                ]
        }
}
]

Answer 1

The data you're looping over is the array, which has objects. So your key will be 0, 1, etc., and the val will be the object at that position in the array.

Your JSON structure actually makes it a bit of a pain to output, because each of your objects only has one property, but the property name varies from object to object. You can do it, by looping over the object properties even though there's only one of them:

var items = [];
$.each(data ,function(outerKey, outerVal) { // <== Loops through the array
  $.each(outerVal, function(key, val) {     // <== "Loops" through each object's properties
      items.push('<li id="'+ key +'">' + val +'</li>');
  });
});

...but I'd change the JSON structure instead. For instance, assuming the keys are unique, your original code would work with this structure:

{
    "us":"USA",
    "fr":"FRANCE",
    "es":"Spain",
    "sa":"South Africa"
}