How to handle async getJSON to copy json objects?

Question

How to assign/clone received JSON object to previously defines JavaScript Object booksJSON ? I need to make booksJSON accessible and visible for all functions.

var booksJSON = {};
    function getBooks(){
    $.getJSON( "bookstore.json", function( json ) {

        $.each(json.books, function(i, json){
            renderEntity(json);
        });
        booksJSON  =  json;  // CLONE OBJECTS 
   });
}

UPDATE:

New code:

    var booksJSON = {};
function getBooks(){
    return $.getJSON( "bookstore.json" );
}


$(document).ready(function(){

     getBooks();
     getBooks().done(function(json) {
        $.each(json.books, function(i, json){
            renderEntity(json);
        });
        booksJSON = json;
        alert(JSON.stringify(booksJSON));
    });

});

why you want to clone? I mean why just assign it into the bookJSON variable? — ncubica, Apr 08 '13 at 22:30
I need to be able to store JSON Object and use outside of 'getBooks()' — J.Olufsen, Apr 08 '13 at 22:31
You can't, the data has'nt downloaded yet, and it's not there for you to use ! — adeneo, Apr 08 '13 at 22:33
Have a look at this question: http://stackoverflow.com/q/14220321/218196. — Felix Kling, Apr 08 '13 at 22:39
@FelixKling - I was actually looking for that answer, but could'nt find it! — adeneo, Apr 08 '13 at 22:42
@adeneo: Mmh, maybe the title of the question is not "good" enough? I hoped it was easily searchable :-/ — Felix Kling, Apr 08 '13 at 22:43
@FelixKling - Now I know where it is, I've seen it before. Was searching for "async problems" etc. here on SO, and only got crap questions as results ? — adeneo, Apr 08 '13 at 22:49
you have to wait for the onsuccess event I see somebody already resolve the question... best — ncubica, Apr 08 '13 at 22:58

adeneo · Accepted Answer · 2013-04-08T22:37:48.537

It has nothing to do with cloning! $.getJSON is asynchronous and you can't use the data before it's available once the $.getJSON function has completed, and that's what the success callback is there for.

var booksJSON = {};
function getBooks(){
    $.getJSON( "bookstore.json", function( json ) {

        /* This is an async function, it executes at a later time */

        $.each(json.books, function(i, json){
            renderEntity(json);
        });
        booksJSON  =  json;  // here json is available
   });
   console.log( booksJSON ); // this happens before the above function, 
                             // so here booksJSON is still an empty object, 
                             // as nothing has been added yet
}

The only thing you can do is something like :

function getBooks(){
    return $.getJSON( "bookstore.json" );
}

getBooks().done(function(json) {
    $.each(json.books, function(i, json){
        renderEntity(json);
    });
});

If that helps any ?

I think `function( json ){...}` is executed after json received because I have valid json object passed to `renderEntity(json);`. Then why if I use `booksJSON = json;` it returns empty object? — J.Olufsen, Apr 08 '13 at 22:35

How to handle async getJSON to copy json objects?

1 Answers1