Javascript handling JSON

Question

This seems really bizarre...

I have some JSON...

{"firstName":"David","lastName":"Smith","email":null,"id":0}

But when I try to parse it and use it with...

<script>
    $(document).ready(function() {
        var json = $.getJSON('userManagement/getUser');
        $("p").text(json.firstName);
    });
</script>

This is the user management view

Users : <p></p>

Nothing appears, but if I just do $("p").text(json); it tells me it's an object and I can see the JSON is correct in firebug, any ideas?

You are trying to use the value before it is returned from the response. See @iambriansreed's answer below. — Evan Davis, Apr 17 '12 at 17:47
@Alnitak The two downvotes you see were received on my own question. Sorry your question was downvoted mine was too. — iambriansreed, Apr 17 '12 at 18:43

iambriansreed · Accepted Answer · 2012-04-17T18:52:55.717

7

Try:

<script>
    $(document).ready(function() {
        $.getJSON('userManagement/getUser',function(json){
            $("p").text(json.firstName);
        });            
    });
</script>

You have to work with the json variable after the AJAX request has completed.

Learn more here about AJAX JSON Requests: http://api.jquery.com/jQuery.getJSON/

Learn more here about general AJAX Requests: http://api.jquery.com/jQuery.ajax/

edited Apr 17 '12 at 18:52

answered Apr 17 '12 at 17:46

iambriansreed

21,935
6
63
79

thank you, I will accept this answer as it worked when the timer lets me :) – David Apr 17 '12 at 17:48
5

this answer is correct, but insufficient, as it doesn't explain _why_ your code is wrong. – Alnitak Apr 17 '12 at 17:50
2

@Alnitak I completely agree. It is of no real help, since Copy&Paste is always a bad teacher. – Christoph Apr 17 '12 at 17:51
@Alnitak Code without explanation seems to have become the norm, and tends to attract the most upvotes because it's much easier/faster to post that kind of answer. – Anthony Grist Apr 17 '12 at 17:53
@Alnitak I thought "You have to work with the json variable after the AJAX request has completed." was pretty clear. – iambriansreed Apr 17 '12 at 17:53
3

@iambriansreed I'm pretty sure you added that later – Alnitak Apr 17 '12 at 17:53
3

and no reason to downvote other correct answers, as I'm pretty sure you did this. – Christoph Apr 17 '12 at 17:55
@Christoph yes, he has two downvotes recorded against this question. Very bad form! – Alnitak Apr 17 '12 at 17:58
@Alnitak The two downvotes you see were received on my own question. Sorry your question was downvoted mine was too. – iambriansreed Apr 17 '12 at 18:42
@iambriansreed yes, you're right - I misread the rep page - apologies. – Alnitak Apr 17 '12 at 18:47

score 2 · Answer 2 · answered Apr 17 '12 at 17:47

2

The $.getJSON() function is just a wrapper around an AJAX call; it doesn't return the JSON that it gets as a result of the AJAX call, but instead returns a jqXHR object (thanks to Mathletics for clarifying this).

You'll need to supply a callback function to do whatever processing of the JSON you need.

answered Apr 17 '12 at 17:47

Anthony Grist

38,173
8
62
76

It does not return a jQuery deferred, but rather a jqXHR: http://api.jquery.com/Types/#jqXHR – Evan Davis Apr 17 '12 at 17:48
@Mathletics although the `jqXHR` object implements the `promise` interface, so it's much the same thing. – Alnitak Apr 17 '12 at 17:49
@Mathletics I went to check the docs after posting my answer because I wasn't entirely sure. Thanks for letting me know, though - updated my answer. – Anthony Grist Apr 17 '12 at 17:51

score 2 · Answer 3 · answered Apr 17 '12 at 17:48

2

$.getJSON() is asynchronous - it doesn't return the JSON.

You need to supply a callback function, either using:

$.getJSON(url, callback);

or

var jqxhr = $.getJSON(url);
jqxhr.done(success_callback); // will be passed the JSON
jqxhr.fail(error_callback);   // will be called if there's an error

the latter is more flexible, as you can also register error callbacks, which the raw $.getJSON method doesn't support.

answered Apr 17 '12 at 17:48

Alnitak

334,560
70
407
495

Regarding to your question, take a look on two similar threads where @iambriansreed participated: [First](http://stackoverflow.com/q/10572350/601179), [Second](http://stackoverflow.com/q/10213620/601179). Should I continue? – gdoron Jun 03 '12 at 08:09

score 1 · Answer 4 · answered Apr 17 '12 at 17:49

You need to use a callback-function, since you retrieve your data asynchronously.

The moment you call $("p").text(json.firstName); the JSON is not loaded yet.

Thats why you have to use:

$.getJSON('userManagement/getUser',function(json){...your code here... }<-callback

Javascript handling JSON

4 Answers4

Linked