Loop and get key/value pair for JSON array using jQuery

Question

I'm looking to loop through a JSON array and display the key and value.

It should be a simplified version of the following post, but I don't seem to have the syntax correct: jQuery 'each' loop with JSON array

I also saw the post Get name of key in key/value pair in JSON using jQuery?, but it also seemed like lots of code for a simple activity.

This illustrates what I'm looking for (but it doesn't work):

var result = '{"FirstName":"John","LastName":"Doe","Email":"[email protected]","Phone":"123 dead drive"}';
$.each(result, function(k, v) {
             //display the key and value pair
            alert(k + ' is ' + v);
        });

There is no mandatory jQuery requirement, but it is available. I can also restructure the JSON if it cuts down the required code.

You have to parse JSON to a JavaScript object first.

Felix Kling
– Felix Kling

2011-10-22 16:49:53 +00:00
Commented Oct 22, 2011 at 16:49 — Felix Kling
– Felix Kling, Commented Oct 22, 2011 at 16:49

Peter Mortensen · Accepted Answer · 2017-10-21 11:01:48Z

147

You have a string representing a JSON serialized JavaScript object. You need to deserialize it back to a JavaScript object before being able to loop through its properties. Otherwise you will be looping through each individual character of this string.

var resultJSON = '{"FirstName":"John","LastName":"Doe","Email":"[email protected]","Phone":"123 dead drive"}';
var result = $.parseJSON(resultJSON);
$.each(result, function(k, v) {
    //display the key and value pair
    alert(k + ' is ' + v);
});

Live demo.

edited Oct 21, 2017 at 11:01

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 22, 2011 at 16:49

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

2 Comments

JStark Over a year ago

Excellent. I added var result = $.parseJSON(resultJSON); and now it works.

Darshan theerth Over a year ago

@Darin how to get "index" value?

mythicalcoder · Accepted Answer · 2015-05-23 07:20:58Z

18

var obj = $.parseJSON(result);
for (var prop in obj) {
    alert(prop + " is " + obj[prop]);
}

edited May 23, 2015 at 7:20

mythicalcoder

3,3071 gold badge35 silver badges45 bronze badges

answered Oct 22, 2011 at 16:49

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

mythicalcoder · Accepted Answer · 2015-05-23 07:21:12Z

8

You can get the values directly in case of one array like this:

var resultJSON = '{"FirstName":"John","LastName":"Doe","Email":"[email protected]","Phone":"123 dead drive"}';
var result = $.parseJSON(resultJSON);
result['FirstName']; // return 'John'
result['LastName'];  // return ''Doe'
result['Email']; // return '[email protected]'
result['Phone'];  // return '123'

edited May 23, 2015 at 7:21

mythicalcoder

3,3071 gold badge35 silver badges45 bronze badges

answered Dec 30, 2013 at 12:02

Oskar

2,57234 silver badges37 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2017-10-21 11:03:19Z

6

The following should work for a JSON returned string. It will also work for an associative array of data.

for (var key in data)
     alert(key + ' is ' + data[key]);

edited Oct 21, 2017 at 11:03

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 3, 2014 at 1:40

Oghenero E.

5,99917 gold badges111 silver badges168 bronze badges

1 Comment

mythicalcoder Over a year ago

JSON string has to be parsed into JSON object.

mythicalcoder · Accepted Answer · 2015-05-23 06:34:23Z

2

Parse the JSON string and you can loop through the keys.

var resultJSON = '{"FirstName":"John","LastName":"Doe","Email":"[email protected]","Phone":"123 dead drive"}';
var data = JSON.parse(resultJSON);

for (var key in data)
{
    //console.log(key + ' : ' + data[key]);
    alert(key + ' --> ' + data[key]);
}

answered May 23, 2015 at 6:34

mythicalcoder

3,3071 gold badge35 silver badges45 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2017-10-21 11:02:40Z

0

The best and perfect solution for this issue:

I tried the jQuery with the Ajax success responses, but it doesn't work so I invented my own and finally it works!

Click here to see the full solution

var rs = '{"test" : "Got it perfect!","message" : "Got it!"}';
eval("var toObject = "+ rs + ";");
alert(toObject.message);

edited Oct 21, 2017 at 11:02

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 1, 2013 at 19:21

user1644502

Collectives™ on Stack Overflow

Loop and get key/value pair for JSON array using jQuery

6 Answers 6

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related