How to wait until getJSON has gotten all records in jQuery

Question

I have this script where I pull through photos from Flickr using jQuery. I'm using the zFlickrFeed script. I need to pull through 300 images from Flickr but currently I'm getting 20 pulled through. I think this is because my getJSON method is interrupted before it is finished.

How do I wait until all 300 have gone and then call my conditional methods? The methods in the condition essentially render the JSON data into either a grid or list style layout.

(function($){
$.fn.flickrfeed = function(userid, tags, options) { 

    // Set plugin defaults
    var defaults = {
        limit: 300,
        header: true,
        layout: 'list',
        imagesize: 'small',
        titletag: 'h4',
        title: true,
        description: true,
        date: true
    };  

    var options = $.extend(defaults, options); 

    // Functions
    return this.each(function(i, e) {
        var $e = $(e);

        // Add feed class to user div
        if (!$e.hasClass('flickrFeed')) $e.addClass('flickrFeed');

        // Define Flickr feed API address
        var api = 'http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json&jsoncallback=?';
        if (userid != '') api += '&id=' + userid;
        if (tags != '') api += '&tags=' + tags;

        // Send request
        $.getJSON(api, function(data) {
            // Process the feeds
            if(options.layout == 'list') {
                _callback(e, data, options);
            }
            else if(options.layout == 'grid') {
                _altcallback(e, data, options);
            }
        });             
    });
};

Have you tried adding some checks to make sure it is because of your `getJSON`? Maybe try setting `async` to `false using `ajaxSetup()`. http://api.jquery.com/jQuery.ajaxSetup/ — , Jun 24 '15 at 13:36
you should increase the request timeout. I would, however, in this case get the images in small blocks, now all at once. Getting them in small quantities avoids a lot of problems. — EduardoFernandes, Jun 24 '15 at 13:37
Looks like the api only returns 20 items. See if there is a limit param you can use. — lshettyl, Jun 24 '15 at 13:37
@FIA2008: Please don't recommend using `async: false`. it was deprecated as of jQuery 1.8 and it locks the browser until the request is finished, creating a terrible user experience. — Andrew Whitaker, Jun 24 '15 at 13:37
Not sure why Cerbrus closed this as a duplicate, because it isn't. — Andy, Jun 24 '15 at 13:38
Use promises, they're already built in and `$.getJSON` returns them: check out $.when.apply — Benjamin Gruenbaum, Jun 24 '15 at 13:53

score 0 · Answer 1 · answered Jun 24 '15 at 13:46

I would create a counter and once it hits the required number of calls, i'd hit the success function.

i'd add: var counter = this.length and in the $.getJSON success function, i'd add: if (--counter > 0) return; this is the code:

var counter = this.length;
return this.each(function(i, e) {`

    var $e = $(e);

    // Add feed class to user div
    if (!$e.hasClass('flickrFeed')) $e.addClass('flickrFeed');

    // Define Flickr feed API address
    var api = 'http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json&jsoncallback=?';
    if (userid != '') api += '&id=' + userid;
    if (tags != '') api += '&tags=' + tags;

    // Send request
    $.getJSON(api, function(data) {
        if (--counter > 0) return;
        // Process the feeds
        if(options.layout == 'list') {
            _callback(e, data, options);
        }
        else if(options.layout == 'grid') {
            _altcallback(e, data, options);
        }
    });             

    });

score 0 · Answer 2 · answered Jun 24 '15 at 13:47

Did you try rewriting the getJSON to the full-fledged $.ajax call and then use a .done() or success function call ?

$.ajax({ url: api }).done(function(data) { // Process the feeds });

OR

$.ajax({ url: api success: function(data) { // Process the feeds } });

How to wait until getJSON has gotten all records in jQuery

2 Answers2