Populate .data() with $.getJSON()

Question

I am trying to populate $('div').data() through JSON. It works fine with JQuery.parseJSON but not with $.getJSON.

// works as expected
$('div').data('dat', { xmin: '-10', xmax: 40 });
$('div').data('dat', jQuery.parseJSON('{"bbx" : {"xmin" : "-10", "xmax" : "40"}}'));

// doesnt work
$('div').data('dat', $.getJSON("init.php", function(json) {return(json);}));

It's asynchronous, so no, that won't work? On the other hand, setting the data inside the callback function of getJSON would work just fine, but not the other way around. — adeneo, Dec 12 '12 at 11:18
Maybe dollar sign is used by another framework? Try `jQuery.getJSON` — arttronics, Dec 12 '12 at 11:20
This might help: [**SO Answer**](http://stackoverflow.com/a/9922250/1195891) — arttronics, Dec 12 '12 at 11:33

score 5 · Answer 1 · answered Dec 12 '12 at 11:18

5

you could do:

$.getJSON("init.php", function(json) {
    $('div').data('dat', json);
});

answered Dec 12 '12 at 11:18

Sudhir Bastakoti

99,167
15
158
162

score 3 · Accepted Answer · answered Dec 12 '12 at 11:19

3

Probably because getJSON is an async operation. The original statement is now out of scope by the time your success function executes.

Can you not do it this way ?

$.getJSON("init.php", function (json) {
    $('div').data('dat', json);
});

answered Dec 12 '12 at 11:19

Ravi Y

4,296
2
27
38

MrCode · Answer 3 · 2012-12-12T11:37:43.920

3

getJSON is an ajax call which is asyncronous, so the function itself doesn't return anything, it just calls the appropriate callback, so you could do this instead:

$.getJSON("init.php", function(json){
    $('div').data('dat', json);
})

Note: $.get will retrieve the JSON as a string and won't parse it unlike getJSON, so if you want to store the JSON as a string then use $.get. Storing the parsed object will work as well (by using getJSON).

edited Dec 12 '12 at 11:37

answered Dec 12 '12 at 11:25

MrCode

63,975
10
90
112

1

"get will retrieve the JSON as a string and won't parse it unlike getJSON" That's a good point! – A. Wolff Dec 12 '12 at 11:31

score 2 · Answer 4 · answered Dec 12 '12 at 11:31

2

You can also store data in array format:

$.getJSON('init.php', function(data) {
    var items = [];

    $.each(data, function(key, val) {
        items.push(val);
    });

    $('div').data('dat', items)
});

answered Dec 12 '12 at 11:31

palaѕн

72,112
17
116
136

Populate .data() with $.getJSON()

4 Answers4