Giphy API Call Returning Results out-of-order

Question

I'm using an API call to Giphy to loop through a string array and return Gifs for each word in the string.

It's working, but the results are showing up out of order.

The beginning of the array is: "STATELY, PLUMP BUCK MULLIGAN CAME FROM THE STAIRHEAD"

And the results show like: Plump Mulligan Came Buck... you get the idea...

Here's the code:

    var chapter = "STATELY, PLUMP BUCK MULLIGAN CAME FROM THE STAIRHEAD," 

let words = chapter.split(" ");

for (i=0; i<words.length; i++){

    let word = words[i];

    var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
    $.ajax({
        url: queryURL,
        method: 'GET'
        })
        .done(function(response) {


                var results = response.data;

                    var gifDiv = $('<div/>');
                    var gif = $('<img/>');
                    gif.addClass('myImg');
                    gif.attr('src', results[0].images.fixed_height.url);
                    gif.attr('data-animate', results[0].images.fixed_height.url)
                    gif.attr('data-state', 'still');
                    gifDiv.append(gif);

                    gifDiv.append('<h1>' + word + '</h1>');

                    gifDiv.appendTo($('#gifs-here'));

  })
};

any ideas why the results are out of order?

they're out of order because there's no "order" to multiple asynchronous gets - no way of knowing which get will complete when. You have two choices. `$.when` to wait for all requests to compete, then do the `done` code in order .. or ... chain the requests so they proceed in a defined order — Jaromanda X, May 10 '18 at 05:04
@JaromandaX thanks. Okay, so if I want them to display in a certain order, I shouldn't create all that html in the ajax call, right? I should have the
and tags set up elsewhere, and let the call just fill in the image part of it. Just saw your edits, thank you. — Nick Tamburro, May 10 '18 at 05:09

Jaromanda X · Accepted Answer · 2018-05-10T05:18:34.963

The two options

Make all the requests as fast as possible, but process the results in series

$.when(...chapter.split(" ").map(word => {
    var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
    return $.ajax({
        url: queryURL,
        method: 'GET'
    });
})).then((...responses) => {
    responses.forEach(response => {
        var results = response.data;
        ..... rest of your done code .....
    });
})

Make the requests and process the results in series, each request waiting for the previous processing ot complete

chapter.split(" ").reduce((p, word) => {
    return p.then(() => {
       var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
        return $.ajax({
            url: queryURL,
            method: 'GET'
        }).then(response => {
            var results = response.data;
            ..... rest of your done code .....
        });
    });
}, $.when())

For completeness, since jQuery $.ajax returns a thenable ... you can use Promises

Promise.all(chapter.split(" ").map(word => {
    var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
    return $.ajax({
        url: queryURL,
        method: 'GET'
    });
})).then(responses => {
    responses.forEach(response => {
        var results = response.data;
        ..... rest of your done code .....
    });
})

and

chapter.split(" ").reduce((p, word) => {
    return p.then(() => {
       var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + word + "&api_key=<MY API KEY>";
        return $.ajax({
            url: queryURL,
            method: 'GET'
        }).then(response => {
            var results = response.data;
            ..... rest of your done code .....
        });
    });
}, Promise.resolve());

Giphy API Call Returning Results out-of-order

1 Answers1