Displaying json returns undefined

Question

Possible Duplicate:
I have a nested data structure / JSON, how can I access a specific value?

Basically I have a returned json object like this:

"products":[
    {
        "id": "21102165",
        "name": "Eliza J (3/4 sleeve ruched waist dress)",
    }]

My method to display it:

function getCart(){
var json = $.getJSON('https://'+storedomain+'/cart?'+fcc.session_get()+'&output=json&callback=?');
alert(json['name']);
}

However the alert displays "undefined". Where I'm I doing wrong here?

Thanks

salexch · Accepted Answer · 2013-01-24T14:56:22.177

4

$.getJSON return $.Deferred object and not a result

function getCart(){
    $.getJSON('https://'+storedomain+'/cart?'+fcc.session_get()+'&output=json&callback=?', function(data) {
        console.log(data.products[0].name);
    });
}

you can do:

function getCart(){
    return $.getJSON('https://'+storedomain+'/cart?'+fcc.session_get()+'&output=json&callback=?');
}  

$.when(getCart()).then(function(data) {
    console.log(data.products[0].name);
});

edited Jan 24 '13 at 14:56

answered Jan 24 '13 at 14:42

salexch

2,644
1
20
17

what do you mean by $.Deferred object? – user208709 Jan 24 '13 at 14:44
You should also fix the other problem (data['name'] isn't going to work). But +1 from me for the main problem. – Denys Séguret Jan 24 '13 at 14:44
http://api.jquery.com/category/deferred-object/ – salexch Jan 24 '13 at 14:49
@dystroy thank you for your suggestion for answer improving, hope it's ok now – salexch Jan 24 '13 at 14:51

score 0 · Answer 2 · answered Jan 24 '13 at 14:44

Use the success callback.

var jqxhr = $.getJSON("example.json", function(data, textStatus, jqXHR) {
  alert("success");
})
.success(function(data, textStatus, jqXHR) { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

See the API documentation for getJSON.

score 0 · Answer 3 · answered Jan 24 '13 at 14:48

Your method should be:

function getCart(callback) {
    var url = 'https://'+storedomain + '/cart?'+fcc.session_get()+'&output=json&callback=?';
    $.getJSON(url, callback);
}

// Usage
getCart(function(data) {
    console.log(data.products); // array of car objects
});

Or you can use deffered object as explained in salexch answer.

You should become familiar with asynchronous nature of AJAX requests and with callback functions.

Displaying json returns undefined

3 Answers3