Issue with gloabl object

Question

I have a global object declared at first line. Then filling the data into it using jquery getJSON. The issue here is I am getting empty object inside function slider, whereas inside getJSON it is printing proper data. Any idea whats wrong here?

var allslides = {};

$.getJSON("data/slides.json", function(data) {
    $.each(data, function(key, val) {
        allslides[key] = { image : val.image, title: val.title, desc:val.desc };
    });
    console.log(allslides); // First 
});

$(function(){
    slider();
});

function slider() {
    console.log(allslides); // second
}

Put your `$.getJSON` inside your `document.ready()` and call `slider()` only from within it's callback function. — haim770, Sep 29 '13 at 14:43

score 0 · Accepted Answer · answered Sep 29 '13 at 14:59

Move your call to slider into your .getJSON as it is asynchronous:

 $.getJSON("data/slides.json", function(data) {
    $.each(data, function(key, val) {
     allslides[key] = { image : val.image, title: val.title, desc:val.desc };
    });
    slider();
});

Issue with gloabl object

1 Answers1