How to dynamically loop getJson data result

Question

I use jQuery $.getJSON to get data from API that return json data in multiple level. The one of the level is dynamic and I want to use varible to access that. Here's the example of result:

{
    "status" : "200",
    "result" : {
        "DYNAMIC_DATA_1" : {
            "name" : "Johny",
            "age" : "20"
        },
        "DYNAMIC_DATA_2" : {
            "name" : "Jenny",
            "age" : "25"
        }
    }
}

from my example above, the "DYNAMIC_DATA_1" and "DYNAMIC_DATA_2" is actually a unique id.

Here is my code to request the json data:

$(function(){
    $.getJSON('/api/username?id='+DYNAMIC_USER_ID, function(data) {
        console.log(data.result.DYNAMIC_DATA.name);
    });
});

I want to dynamically loop the data.result.the-id/key to get each name value.

Aren't you searching for console.log(data.result.DYNAMIC_DATA_1.name);? The key DYNAMIC_DATA does not exist. — Paul
– Paul, Commented May 13, 2018 at 7:56
They're not "dynamic variables", they're just "object keys". Google that and get back to us. — Dexygen
– Dexygen, Commented May 13, 2018 at 7:57
@Paul I want to display all the individual name. So my goal is to use variable in data.result.VARIABLE_HERE.name to display for example the name "Johny". — Pixel Dsign
– Pixel Dsign, Commented May 13, 2018 at 7:59
@PixelDsign I added answer, hope it will work as per your expectation. — Rohìt Jíndal
– Rohìt Jíndal, Commented May 14, 2018 at 6:25

Asons · Accepted Answer · 2018-05-13 09:04:50Z

With a simple loop you can iterate through your data.result, no matter their actual key name, or in your case unique id, and here is a few solutions you can use within your getJSON function, e.g..

$(function(){
    $.getJSON('/api/username?id='+DYNAMIC_USER_ID, function(data) {
        $.each( data.result, function( key, value ) {
            console.log("Name:", value.name, "(ID/Key is " + key + ")");
        });    
    });
});

Stack snippet

var data = {
    "status" : "200",
    "result" : {
        "DYNAMIC_DATA_1" : {
            "name" : "Johny",
            "age" : "20"
        },
        "OTHER_DYNAMIC_DATA_WORKS_TOO" : {
            "name" : "Jenny",
            "age" : "25"
        }
    }
}

//jQuery each
console.log("jQuery each");
$.each( data.result, function( key, value ) {
    console.log("Name:", value.name, "(ID/Key is " + key + ")");
});

//js for-in
console.log("js for-in");
for (var key in data.result) {
    console.log("Name:", data.result[key].name, "(ID/Key is " + key + ")");
}

//js forEach
console.log("js forEach");
Object.keys(data.result).forEach(function(key) {
    console.log("Name:", data.result[key].name, "(ID/Key is " + key + ")");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Rohìt Jíndal · Accepted Answer · 2018-05-14 06:24:29Z

0

Try this straight forward way :

var jsonObj = {
    "status" : "200",
    "result" : {
        "DYNAMIC_DATA_1" : {
            "name" : "Johny",
            "age" : "20"
        },
        "DYNAMIC_DATA_2" : {
            "name" : "Jenny",
            "age" : "25"
        }
    }
};

var dynamicKeys = Object.keys(jsonObj.result);

dynamicKeys.map(item => {
  console.log(jsonObj.result[item].name);
});

answered May 14, 2018 at 6:24

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to dynamically loop getJson data result

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related