CODEWITHSUNDEEP
javascriptjqueryarrays
Horst Knacklgrubr
Horst Knacklgrubr

Reputation: 13

How to put multiple GET's in an array with jQuery

How do I put multiple GET's in an array?

I want to start with putting all channelId's in an array like this:

var Channels = [ID1, ID2, ID3];

And then a function with $each... But how to do it? :)

Who can help me please? It will be much appreciated

var ItemArray = [];

var d1 = $.get("https://www.googleapis.com/youtube/v3/search?channelId=UCVQ2Z9dNQ2aJJ10f6SgBH0g&type=video&order=date&maxResults=1&part=snippet&KEY",
        function (data) {
            $.each(data.items, function (i, item) {
idee = item.id.videoId;
tittie = item.snippet.title;
cattit = item.snippet.channelTitle;
datie = item.snippet.publishedAt;
ItemArray.push([datie, cattit, idee, tittie]);
            });
        });

var d2 = $.get("https://www.googleapis.com/youtube/v3/search?channelId=UC2xskkQVFEpLcGFnNSLQY0A&type=video&order=date&maxResults=1&part=snippet&KEY",
        function (data) {
            $.each(data.items, function (i, item) {
idee = item.id.videoId;
tittie = item.snippet.title;
cattit = item.snippet.channelTitle;
datie = item.snippet.publishedAt;
ItemArray.push([datie, cattit, idee, tittie]);
            });
        });

var d3 = $.get("https://www.googleapis.com/youtube/v3/search?channelId=UCGHi_s4RrqUh4hsS4mLbiPg&type=video&order=date&maxResults=1&part=snippet&key=KEY",
        function (data) {
            $.each(data.items, function (i, item) {
idee = item.id.videoId;
tittie = item.snippet.title;
cattit = item.snippet.channelTitle;
datie = item.snippet.publishedAt;
ItemArray.push([datie, cattit, idee, tittie]);
            });
        });

$.when(d1, d2, d3).done(function() {

ItemArray.sort(function(a, b) {
        return a[0] - b[0];
});

for(i=0;i<=ItemArray.length;i++){
$('#mytable').append('<tr><td>'+ItemArray[i][0]+'</td><td><a target="_blank" href="https://www.youtube.com/user/'+ItemArray[i][1]+'">'+ItemArray[i][1]+'</a></td><td><a target="_blank" href="https://www.youtube.com/watch?v='+ItemArray[i][2]+'">'+ItemArray[i][3]+'</a></td></tr>');
}
})
})

Upvotes: 1

Views: 41

Answers (2)

Codeinator
Codeinator

Reputation: 719

See example below.
The code is commented an should work as expected.
Ask if any questions.

(function($) {
    var ItemArray = [];

    // List all IDs here
    var ids = ["UCVQ2Z9dNQ2aJJ10f6SgBH0g", "UC2xskkQVFEpLcGFnNSLQY0A", "UCGHi_s4RrqUh4hsS4mLbiPg"];
    var done = [];

    // Go through all ids
    $.each(ids, function(index, value) {
        // Save all Deferred in variable done
        done.push($.get("https://www.googleapis.com/youtube/v3/search?channelId=" + value + "&type=video&order=date&maxResults=1&part=snippet&KEY", fn)); // use function fn for doing all the time the same
    });

    function fn(data) {
        $.each(data.items, function(i, item) {
            idee = item.id.videoId;
            tittie = item.snippet.title;
            cattit = item.snippet.channelTitle;
            datie = item.snippet.publishedAt;
            ItemArray.push([datie, cattit, idee, tittie]);
        });
    }
	
    // to use an array as input for when()
    // you need th use the prototype method apply to convert it
    $.when.apply($, done).done(function() {

        // this part stays the same
        ItemArray.sort(function(a, b) {
            return a[0] - b[0];
        });

        for (i = 0; i <= ItemArray.length; i++) {
            $('#mytable').append('<tr><td>' + ItemArray[i][0] + '</td><td><a target="_blank" href="https://www.youtube.com/user/' + ItemArray[i][1] + '">' + ItemArray[i][1] + '</a></td><td><a target="_blank" href="https://www.youtube.com/watch?v=' + ItemArray[i][2] + '">' + ItemArray[i][3] + '</a></td></tr>');
        }
    });
})(jQuery);

Upvotes: 1

epascarello
epascarello

Reputation: 207557

So loop over the array and make the ajax calls, pushing the Ajax calls into a new array.

var channels = ["a","b","c"],
    calls = channels.reduce( function (arr, current) {
        var xhr = $.get("http://example.com?q=" + current, function() { /* your code ajax success*/}); 
        arr.push(xhr);
        return arr;
    }, []);

//Take that array and apply it to the when
$.when.apply($, calls).done( function () {
   //Your code
} )

Upvotes: 0

Related Questions