How to dynamically access values in a json with jquery

Question

Yes there are a number of threads questioning similar issues to the following, but I found very few and very little help regarding dynamic keys and pulling single values from jsons holding multiple values per key.

I have a json in which the keys are dynamic and I need to be able to call upon each separate value.

Any ideas?

json example below:

{"AppliedPrepaidBundle":{"id":["14","15","24","25","26","27","28","29","30","31"],"prepaid_bundle_id":["5","5","5","5","5","5","5","5","5","5"]},"Device":{"id":["77","77","91","91","117","117","117","117","117","124"]}}

I have played around with the following code, but currently only managed to spit out a string of values rather than individual ones:

        $.each(data, function (key1, value1) {
            $.each(value1, function (key, value) {
                $('body').append('<li id="' + key + '">' + key1 +' ' + key +' ' + value + '</li>');
            });
        });

Solved with this:

        json = JSON.parse(data);
        for (var index in json) {
            $.each(json[index], function(key,value) {
                for(var i = 0; i< json[index][key].length; i++){
                    $('body').append('<li>' + index +' ' + key +' ' + json[index][key][i] + '</li>');
                }
            });
        }

edited question to include some tried code, just getting a little stuck with pulling individual values. — xtremetom, Oct 25 '13 at 08:28
Are you creating these JSON Objects? If yes than use an Array of anonymous JSON Objects to make it iterateable http://gist.github.com/MeiSign/d2d92beee756f3fe0d54 — MeiSign, Oct 25 '13 at 08:30
possible duplicate of [How to parse JSON in JavaScript](http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript) — John Dvorak, Oct 25 '13 at 08:41
yes lots of questions on parsing json, very few on dynamic keys and multiple values per key. — xtremetom, Oct 25 '13 at 08:46

score 0 · Accepted Answer · answered Oct 25 '13 at 08:32

0

JSON returns an object in JavaScript. So you could do something like this:

var json = {"AppliedPrepaidBundle":{"id":["14","15","24","25","26","27","28","29","30","31"],"prepaid_bundle_id":["5","5","5","5","5","5","5","5","5","5"]},"Device":{"id":["77","77","91","91","117","117","117","117","117","124"]}};

for (var i=0; i<json.AppliedPrepaidBundle.id.length; i++) {
    console.log("id"+i+": "+json.AppliedPrepaidBundle.id[i]);
}

This prints out all the values of the ID object: 14, 15, 24, 25, etc

answered Oct 25 '13 at 08:32

jasonscript

6,039
3
28
43

The issue here is making that dynamic. The json that is produced is subject to user selected options and thus the key can change. – xtremetom Oct 25 '13 at 08:36
@xtremetom then find out what the key is (what if there is more than one? What if there isn't any?) and use the square bracket notation as `json[key][i]` – John Dvorak Oct 25 '13 at 08:42
solved with an adaptation of the above utilizing comment by Jan – xtremetom Oct 25 '13 at 09:21

Sridhar R · Answer 2 · 2013-10-25T08:41:12.433

From this example you can access all elements

var json = {"AppliedPrepaidBundle":{"id":["14","15","24","25","26","27","28","29","30","31"],"prepaid_bundle_id":["5","5","5","5","5","5","5","5","5","5"]},"Device":{"id":["77","77","91","91","117","117","117","117","117","124"]}};

for (var i=0; i<json.AppliedPrepaidBundle.id.length; i++) {
   $('body').append("<li>AppliedPrepaidBundle id"+i+": "+json.AppliedPrepaidBundle.id[i]+'</li>');
}
for (var i=0; i<json.AppliedPrepaidBundle.prepaid_bundle_id.length; i++) {
    $('body').append("<li>PrepaidBundleid"+i+":"+json.AppliedPrepaidBundle.prepaid_bundle_id[i]+'</li>');
}
for (var i=0; i<json.Device.id.length; i++) {
    $('body').append("<li>Device id"+i+": "+json.Device.id[i]+'</li>');

}

Here is the fiddle

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

Use JSON.parse to create an object. (See How to parse JSON in JavaScript). Then loop through the properties with for (x in yourObject) { ... }.

var jsonObject = JSON.parse('your JSON-String');
for (property in jsonObject) {
    // do something with jsonObject[property]
    console.log(property + ' ' + jsonObject[property]);
}

edited May 23 '17 at 12:15

Community

1
1

answered Oct 25 '13 at 08:36

ChristophT

510
5
10

Careful with `property`. Might need to use `.HasOwnProperty` to filter out system properties – jasonscript Oct 25 '13 at 08:42

score 0 · Answer 4 · answered Oct 25 '13 at 08:38

you can work with the javascript basic functionality: http://jsfiddle.net/taUng/

var data = {"AppliedPrepaidBundle":{"id":["14","15","24","25","26","27","28","29","30","31"],"prepaid_bundle_id":["5","5","5","5","5","5","5","5","5","5"]},"Device":{"id":["77","77","91","91","117","117","117","117","117","124"]}};
for (var dataIndex in data) {
     console.log(dataIndex, data[dataIndex]);
     var subData = data[dataIndex];
     for (var subDataIndex in subData) {
         console.log(subDataIndex, subData[subDataIndex]);
     }
}

And so on...

When your a fit in javascript you can also work with Recursion to don't repeat yourself. (http://en.wikipedia.org/wiki/Dont_repeat_yourself)

How to dynamically access values in a json with jquery

4 Answers4