Scope for getJSON in jQuery

Question

I'm having a bit of trouble trying to manage scope when using getJSON.
So on a HTML page I have an unordered list to be filled with list items from a JSON file. The list is markup for a carousel.

HTML:
<ul class="carousel"></ul>

JS:

grabJSON : function() {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        $('ul.carousel').append(items.join(''));
        // carousel action here
        $('ul.carousel').carouselFunction({
            // carousel options here
        });
    });
}

Currently, I have to place the carousel function within the getJSON function. If I make another function for setting up the carousel, I lose the scope within getJSON.

What is a preferred method of breaking this out so I can have a setupCarousel : function() that is called from getJSON? Normally if I want to call a function from another function in an object I can just go this.setupCarousel(), however with nested scope I'm not sure how to handle this.

Also, outside of the getJSON function I do not have access to any of the elements that were appended. So I can access ul, but not any of the list items created while adding them from getJSON.

mu is too short · Accepted Answer · 2011-08-03 06:22:27Z

3

The $.getJSON call is asynchronous. So, if you do this:

thing.grabJSON();
do_some_other_stuff();

The do_some_other_stuff will be executed before the $.getJSON call finishes. You have to put everything inside the $.getJSON callback because that piece of code will be executed at some time in the future; the callback is free to pass any data it receives to other functions (as in Kishnore's answer) but code that is executed after $.getJSON (where after means after in the source code) can't depend on the $.getJSON call doing anything.

You could do something like this:

function buildCarousel(items) {
    $('ul.carousel').append(items.join(''));
    $('ul.carousel').carouselFunction({
        // carousel options here
    });
}

// ...

grabJSON : function(cb) {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        cb(items);
    });
}

//...

thing.grabJSON(buildCarousel);

if you wanted to separate the $.getJSON from what needs to be done with that JSON. In this particular case, breaking it apart like the above is more busy work than real work but that sort of pattern (callbacks within callbacks, callbacks all the way down) is pretty common when dealing with AJAX.

answered Aug 3, 2011 at 6:22

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

xtine Over a year ago

Thanks for explaining the process going on. Still trying to get the handle on asynchronous callback behavior, and this definitely helps. Going to try to break it out like that.

xtine Over a year ago

Is there any way to call the object function (buildCarousel : function () {}) from the grabJSON, or does it have to be a function outside of it?

mu is too short Over a year ago

@xtine: things.grabJSON(function(items) { things.buildCarousel(items) }), another common pattern. There's also bind for binding a function to a specific this but you can't depend on that being available everywhere just yet.

xtine Over a year ago

Is there a name or reference for the things.grabJSON pattern?

mu is too short Over a year ago

@xtine: The anonymous function is a closure but I don't know of a name for that specific pattern.

Kishore · Accepted Answer · 2011-08-03 06:06:34Z

0

Did you Try something like this?

grabJSON : function() {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        makeCarousel(items);
    });
}
//pass items to make carosuel function and use it this should solve your problem.
makeCarosuel: function(items) {
$('ul.carousel').append(items.join(''));
        // carousel action here
        $('ul.carousel').carouselFunction({
            // carousel options here
        });
}

answered Aug 3, 2011 at 6:06

Kishore

1,9121 gold badge15 silver badges22 bronze badges

1 Comment

xtine Over a year ago

You cannot call makeCarousel because it lacks the scope... it either has to be a outside function ( function makeCarousel() ), otherwise it won't recognize it.

Collectives™ on Stack Overflow

Scope for getJSON in jQuery

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related