jQuery Deferred a loop with ajax call

Question

I currently have an application that depends on all data being retrieved then proceed with further code.

There is a primary function "_update()" that contains a loop, this loop calls _getData(). I need "_update()" to set a variable to true when all data has been received.

Here is what I have:

DataCollection.prototype._update = function () {
    var _self = this;
    var _itemsResponded = 0;
    var itemData = [];

    if (_self._ready) {
        _self._ready = false;

        this.collection.forEach(function (item, index) {
            _self.apiData.id = item.id;

            var ajaxPromise = _self._getData();
            ajaxPromise.done(function(data){
                itemData[index] = data;
                _self._itemsResponded++;
            });
        })

        if (_self._itemsResponded === _self.collection.length) {
            _self._ready = true;
            console.log(itemData);
            console.log('done');
        }
    }
}

DataCollection.prototype._getData = function () {
    var _self = this;

    var ajaxPromise = $.ajax({
        url: 'ajax.php',
        data : _self.apiData,
        dataType: 'json'
    });

    var dff = $.Deferred();
    ajaxPromise.then(function(data) {
        dff.resolve(data);
    }, function(){
        dff.reject();
    });

    return dff.promise();
}

From my understanding, the _getData function is working correctly. It's the .forEach in _update that does not work as expected. I thought .forEach was synchronous?

Arun P Johny · Accepted Answer · 2015-04-07 05:59:09Z

1

Since the contents of the forEach() method is async, the foreach loop will finish executing before all the ajax request are completed, so your check should go inside the done callback like

DataCollection.prototype._update = function () {
    var _self = this;
    var _itemsResponded = 0;
    var itemData = [];

    if (_self._ready) {
        _self._ready = false;

        this.collection.forEach(function (item, index) {
            _self.apiData.id = item.id;

            var ajaxPromise = _self._getData();
            ajaxPromise.done(function (data) {
                itemData[index] = data;
                _self._itemsResponded++;

                if (_self._itemsResponded === _self.collection.length) {
                    _self._ready = true;
                    console.log(itemData);
                    console.log('done');
                }
            });
        })
    }
}

You can use $.when() to simplify this to

DataCollection.prototype._update = function () {
    var _self = this;
    var _itemsResponded = 0;
    var itemData = [];

    if (_self._ready) {
        _self._ready = false;

        var promises = $.map(this.collection, function (item, index) {
            _self.apiData.id = item.id;
            return _self._getData();
        });

        $.when.apply($, promises).done(function () {
            var itemData = $.map(arguments, function (arr, idx) {
                return arr[0];
            })
            _self._ready = true;
            console.log(itemData);
            console.log('done');
        })
    }
}

DataCollection.prototype._getData = function () {
    var _self = this;

    var ajaxPromise = $.ajax({
        url: 'ajax.php',
        data: _self.apiData,
        dataType: 'json'
    });
    return ajaxPromise;
}

edited Apr 7, 2015 at 5:59

answered Apr 7, 2015 at 5:50

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Stoyvo Over a year ago

Inside the $.when(), you pass "arguments" to the map. What is this variable?

Arun P Johny Over a year ago

@Stoyvo developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

jQuery Deferred a loop with ajax call

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related