Getting Values from JSON with jQuery

Question

I get the following string:

[{"Key":1,"Value":"correct"},{"Key":2,"Value":"incorrect"},{"Key":3,"Value":"incorrect"},{"Key":4,"Value":"correct"},{"Key":5,"Value":"incorrect"}]

I want to change the background color of my TR based on whether the ID of that TR has a value of "correct" or "incorrect" in the JSON.

How can I get the value of an individual item from JSON? I have tried:

            success: function (result) {
                // update with results
                //alert(JSON.stringify(result));
                //$('#myDiv').html(JSON.stringify(result));

                // non of these work
                alert(result[0]);
                alert(result[key]);
            },

What output do you get ? Or what error ?

Touki
– Touki

2012-10-08 16:22:43 +00:00
Commented Oct 8, 2012 at 16:22 — Touki
– Touki, Commented Oct 8, 2012 at 16:22

I Hate Lazy · Accepted Answer · 2012-10-08 16:22:22Z

2

You can use $.each() to iterate the Array of Objects.

$.each(result, function(i, item) {
    alert(item.Key);
});

In the callback to $.each(), item will be a reference to the current item in the Array being iterated.

Then you just use normal property access to get the value for the Key property.

Of course you could also use a traditional for statement to loop the Array.

for (var i = 0; i < result.length; i++) {
    var item = result[i];
    alert(item.Key);
}

All of this assumes your response has the proper Content-Type setting, or you've give dataType:"json" to $.ajax().

answered Oct 8, 2012 at 16:22

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

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

Comments

Anton Baksheiev · Accepted Answer · 2012-10-08 16:26:53Z

1

You can convert your JSON format to Object, in your situation it will be array, so you can use forEach to check what you want.

Try this

var obj= JSON.parse( '[{"Key":1,"Value":"correct"},{"Key":2,"Value":"incorrect"},{"Key":3,"Value":"incorrect"},{"Key":4,"Value":"correct"},{"Key":5,"Value":"incorrect"}]' );



obj.forEach(function(i){alert(i.Key);alert(i.Value) })

answered Oct 8, 2012 at 16:26

Anton Baksheiev

2,2512 gold badges15 silver badges15 bronze badges

Comments

DotNetWala · Accepted Answer · 2012-10-08 16:30:12Z

1

Have a look at this: http://goessner.net/articles/JsonPath/.I have not used it but looks like and good way to get values from a Json structure.

answered Oct 8, 2012 at 16:30

DotNetWala

6,6101 gold badge21 silver badges11 bronze badges

Comments

Marc B · Accepted Answer · 2012-10-08 16:23:38Z

0

You don't specify, but assuming that JSON string is what your ajax code is receiving as the response, then you're actually re-JSONing that text, so it becomes a double-encoded string.

jquery can auto-decode that back to a native structure for you, if you tell is that you're expecting json as a response, e.g.

$.ajax({
   dataType: 'json',
   etc...
});

then you'd simply have

alert(result[0]['key']);

or

data = jquery.parseJSON(result);
alert(data[0]['key']);

answered Oct 8, 2012 at 16:23

Marc B

362k44 gold badges433 silver badges508 bronze badges

2 Comments

Marc B Over a year ago

Then the ajax call is failing, and your success code block is never called. add an error block to catch that and see why things aren't working.

user1477388 Over a year ago

No, the success block is called because I am outputting the entire JSON string via $('#myDiv').html(JSON.stringify(result));. The problem is with the code inside of the success block.

Sushanth -- · Accepted Answer · 2012-10-08 16:30:16Z

0

Make sure you specify .. dataType:'json' in your Ajax Request

Try

alert(result[0]["key"]);  // For the first

//

$.each(result , function(i) {
    console.log( 'Key is - ' + result[i]["Key"] + ' -- Value is - ' + result[i]["Value"]);
});

Check FIDDLE

edited Oct 8, 2012 at 16:30

answered Oct 8, 2012 at 16:21

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

3 Comments

user1477388 Over a year ago

I tried using alert(result[0]["key"]); and alert(result[0]["Key"]); but it just says, "undefined."

Sushanth -- Over a year ago

Try console.log(result) .. What do you see

user1477388 Over a year ago

I am rushed so I will have to continue with the working solution of using $.each but thanks for your help.

Collectives™ on Stack Overflow

Getting Values from JSON with jQuery

5 Answers 5

Comments

Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related