How to get values from nested json string by jquery?

Question

{
    "data": {
        "info": [
            {
                "username": "john",
                "uid": "893y4t89hg98y7894th",
                "avatar": null,
                "level": null
            },
            {
                "username": "joel",
                "uid": "ui9otjry4t89hg994t",
                "avatar": null,
                "level": null
            }
        ]
    }
}

This is the json data. Here is the jsfiddle.

JS:

$(function(){
    var str = '{"data":{"info":[{"username":"john","uid":"893y4t89hg98y7894th","avatar":null,"level":null},{"username":"joel","uid":"ui9otjry4t89hg994t","avatar":null,"level":null}]}}'; 
    str = JSON.parse(str.data.info);
    $.each(str, function(i, item){
        $(".result1").append(item.username);
        $(".result2").append(item.uid);
    });
});

Could someone tell me what have I done wrong?

Alexey Rodin · Accepted Answer · 2014-12-26 08:24:28Z

3

A little wrong. You can not access the string as an object.

str = JSON.parse(str.data.info); //str is string, no object
$.each(str, function(i, item){
//... it wrong


str = JSON.parse(str);//parse string, get object
$.each(str.data.info, function(i, item){
//... it right

See DEMO

answered Dec 26, 2014 at 8:24

Alexey Rodin

2041 silver badge4 bronze badges

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

Comments

Resolution · Accepted Answer · 2014-12-26 08:15:32Z

0

Try this:

$(function(){
    var str = '{"data":{"info":[{"username":"john","uid":"893y4t89hg98y7894th","avatar":null,"level":null},{"username":"joel","uid":"ui9otjry4t89hg994t","avatar":null,"level":null}]}}'; 
    str = JSON.parse(str);
    $.each(str.data.info, function(i, item){
        $(".result1").append(item.username);
        $(".result2").append(item.uid);
    });
});

Updated Fiddle

answered Dec 26, 2014 at 8:15

Resolution

7791 gold badge8 silver badges18 bronze badges

Comments

Rahul Munjal · Accepted Answer · 2014-12-26 08:18:27Z

0

your parsing is wrong.You have ot make str a json object pefore getting values.

Try this:

$(function(){
var str = '{"data":{"info":[{"username":"john","uid":"893y4t89hg98y7894th","avatar":null,"level":null},{"username":"joel","uid":"ui9otjry4t89hg994t","avatar":null,"level":null}]}}'; 
str = JSON.parse(str);
var info=str['data']['info'];
console.log(info);
for(var key in info){
    $(".result1").append(info[key]['username']);
    $(".result2").append(info[key]['uid']);
}
});

Same updated in your fiddle.

answered Dec 26, 2014 at 8:18

Rahul Munjal

2,7132 gold badges17 silver badges35 bronze badges

7 Comments

mplungjan Over a year ago

No real need for the [] notation here.

mplungjan Over a year ago

Much harder to read in my opinion and also has a higher chance of typos with ['']

Rahul Munjal Over a year ago

But if you want to access the keys at runtime, i think its the best way.

mplungjan Over a year ago

Sure. You are correct when you use [key] but not when you use ['data'] in my opinion

Rahul Munjal Over a year ago

you can get it dear. Check the fiddle provided above. I updated it

|

mplungjan · Accepted Answer · 2014-12-26 09:44:56Z

0

This will work better - you need to parse the string before you can access an object in the JSON

$(function(){
    var str = '{"data":{"info":[{"username":"john","uid":"893y4t89hg98y7894th","avatar":null,"level":null},{"username":"joel","uid":"ui9otjry4t89hg994t","avatar":null,"level":null}]}}'; 
    str = JSON.parse(str);
    var info = str.data.info;
    $.each(info, function(i, item){
        $(".result1").append(item.username);
        $(".result2").append(item.uid);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="result1"></div>
<div class="result2"></div>

edited Dec 26, 2014 at 9:44

answered Dec 26, 2014 at 8:17

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

How to get values from nested json string by jquery?

4 Answers 4

Comments

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related