Running a function after another function with loops & promises in jQuery/JavaScript

Question

I'm working on a college/personal project which takes RSS urls and sends them through a series of APIs. Code follows:

var tempStory = [];
function getFeed () {
        $.getJSON('spoonfed/app/scripts/categories.json', function(categories){
            for (var category in categories){
                if (categories[category][2] === true){
                    getFeedURLs(categories[category][0]).then(function(rssData) {
                        for (var item in rssData){
                            tempStory.push(rssData[item]);
                        }
                    });
                }
            }
    });
}

There are an unknown number of categories I need to iterate over in addition to 10 news stories in each category, which are then pushed to the array tempStory. I need to run another function on this array of data. I think promises are the key here but I can't get my head around how I'd use them in this case.

Any help would be really appreciated and I'm happy to provide more of the code if needed, including the structure of the categories.json file and the getFeedURLs function.

@Quill - maybe or maybe not. It could be that categories[category][2] could contain several different types of values and the OP wants to make sure it's === true, not any other truthy value. — jfriend00
– jfriend00, Commented Oct 27, 2015 at 23:44
@jfriend00, yes, I see your point now. Thanks for clarifying. — Quill
– Quill, Commented Oct 27, 2015 at 23:58

jfriend00 · Accepted Answer · 2015-10-27 23:45:33Z

2

If the issue is that you're just trying to figure out how to get all the data out, then you can do this:

function getFeed() {
    return $.getJSON('spoonfed/app/scripts/categories.json').then(function (categories) {
        var tempStory = [], promises = [];
        for (var category in categories) {
            if (categories[category][2] === true) {
                promises.push(getFeedURLs(categories[category][0]).then(function (rssData) {
                    for (var item in rssData) {
                        tempStory.push(rssData[item]);
                    }
                }));
            }
        }
        return $.when.apply($, promises).then(function() {
            // return results array as the fulfilled value of the promise
            return tempStory;
        });
    });
}

getFeed().then(function(data) {
    // all the data available here
}, function(err) {
    // error here
});

The key aspects of this are:

Return the original ajax promise from getFeed().
When iterating the categories, push all those promises into an array to collect them all
Use $.when() with your array of promises to know when all of those are done
From within the $.getJSON.then() handler, return the $.when() promise which will chain to the $.getJSON() promise and let you return an array of results.
From within the $.when().then() handler, return our results so that becomes the fulfilled value of the final promise

Note: because of the way you chose to accumulate the tempStory array, it's results are not in a guaranteed order. Additional code could be written to maintain the order.

edited Oct 27, 2015 at 23:45

answered Oct 27, 2015 at 23:40

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

James Cyan Over a year ago

This is awesome, thank you- I didn't realise promises could be used in that way but to be honest promises were pure AJAX magic up to this point!

jfriend00 Over a year ago

@JamesCyan - The real power of promises comes when you're trying to do something exactly like this - manage a whole bunch of async operations and end up with all the results and handle errors appropriately.

jfriend00 Over a year ago

@JamesCyan - Since it looks like you may be fairly new to Stack Overflow, do you realize that if you get your question answered, you can check the green checkmark to the left of the best answer. That will both indicate to the community that your question has been answered and will earn your some reputation points.

Collectives™ on Stack Overflow

Running a function after another function with loops & promises in jQuery/JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related