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
– pimvdb, Commented Nov 24, 2012 at 10:29
@pimvdb: I need this json to parse using my approach: adobe.github.com/Spry/samples/data_region/…. the output should be the table as shown below the example 10 of link — Mike
– Mike, Commented Nov 24, 2012 at 11:07
Have a look at stackoverflow.com/questions/11922383/…. If you know the structure of the JSON, it should not be difficult to access the right values. — Felix Kling
– Felix Kling, Commented Nov 24, 2012 at 17:19

T.J. Crowder · Accepted Answer · 2012-11-24 09:09:23Z

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, 2012 at 9:09

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mike Over a year ago

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 adobe.github.com/Spry/samples/data_region/…

T.J. Crowder Over a year ago

@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.

Mike Over a year ago

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

nhahtdh Over a year ago

@Mike: Can you do anything about the structure of JSON from server side?

Mike Over a year ago

@nhahtdh: No i have only js as an option.

|

Collectives™ on Stack Overflow

getJSON displays [object Object] rather than actual values

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related