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" }
                            ]
                    }


                ]
        }
}
]

Could you say what result you want? "Iterating" is a bit too vague - what elements should appear on the screen and what data from the JSON should they contain? — pimvdb, Nov 24 '12 at 10:29
@pimvdb: I need this json to parse using my approach: http://adobe.github.com/Spry/samples/data_region/JSONDataSetSample.html#Example10. the output should be the table as shown below the example 10 of link — Mike, Nov 24 '12 at 11:07
Have a look at http://stackoverflow.com/questions/11922383/i-have-a-nested-data-structure-json-how-can-access-a-specific-value. If you know the structure of the JSON, it should not be difficult to access the right values. — Felix Kling, Nov 24 '12 at 17:19

score 3 · Accepted Answer · answered Nov 24 '12 at 09:09

3

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"
}

answered Nov 24 '12 at 09:09

T.J. Crowder

1,031,962
187
1,923
1,875

how would one get a nested json like how I have, using the approach I have used. e-g In your opinion what is the ideal way to getjson for this example http://adobe.github.com/Spry/samples/data_region/JSONDataSetSample.html#Example10 – Mike Nov 24 '12 at 09:15
1

@Mike: *"how would one get a nested json like how I have, using the approach I have used"* See the first part of the answer. – T.J. Crowder Nov 24 '12 at 09:16
If you see my updated JSON, I again get the object displayed. so it definitely depends on the level of nesting. is there to way that works for all levels of json nesting. Sorry if I am asking dumb question but I am new to json – Mike Nov 24 '12 at 09:23
@Mike: Can you do anything about the structure of JSON from server side? – nhahtdh Nov 24 '12 at 09:24
@nhahtdh: No i have only js as an option. – Mike Nov 24 '12 at 09:29
@Mike: It depends which data you exactly want to access. If you have an unknown number of levels, then using recursion is a possible solution. – Felix Kling Nov 24 '12 at 10:25
@T.J.Crowder thanks for the answer, but did you happen to look at my updated JSON – Mike Dec 03 '12 at 14:46
@Mike: Fundamentally nothing changes. Anywhere there's an *array* (`[` ... `]`), you loop through it (with `$.each` or whatever). Everywhere there's an *object* (`{` ... `}`), you have access to that object's properties and/or can loop through it (also with `$.each`). – T.J. Crowder Dec 03 '12 at 15:48

getJSON displays [object Object] rather than actual values

1 Answers1