Twitch TV Help Needed please

1

I wrote this code - with the results in comments, What is going on please…

/*
Yeah… I know what you are thinking… I am not getting any response from the API, so push doesn’t push anything into the response array. but this is where is gets interesting.
‘console.log(response);’ prints an empty array in the console but when I click on the drop down next to the array, it reveals all the objects in the array as expected, with an alert that says, “This values where evaluated just now”
*/

The question in summary is, How can I successfully push each of the responses gotten from the ajax API calls into my response array?

EDIT: The ultimate goal of this function is to store all channel objects in the response array, which I intend to pass as a parameter to another function that will use that information to populate the page accordingly.

function fetchFavorites(){
//    debugger;
    var favorites = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    
    var response = [];
    console.log('faovrites'); 
    
    for(var i = 0; i < favorites.length; i++){
        
        var display_name = favorites[i];
        
        $.ajax({ 
            display_name: display_name,
            type: 'GET',
            url: 'https://api.twitch.tv/kraken/streams/' + display_name,
            headers: {
                'Client-ID': 'my_key_goes_here' //I used the actual key while making the API calls
            },

            success: function(data) {
                console.log(data) // logs the data I expect to push into the console without any issues.
                data.display_name = this.display_name;
                response.push(data); //push response to array of responses (objects)
            },

            error: function(xhr, status, error) {
                console.log(xhr, status, error);
            },
            
            cache: false
        });
    }
    alert(response.length); // this alerts 0
   console.log(response); // This prints an empty array.

   /*
    Yeah... I know what you are thinking.... I am not getting any response so push doesn't push anything. 
     but this is where is gets interesting.
     'console.log(response);' prints an empty array in the console, but when I click on the drop down next to the array,
     it reveals all the objects in the array as expected, with an alert that says, "This values where evaluated just now"
   */

}
2

getJSON() is asynchronous, so alert(response.length) is run before all the data is received. Instead of console.log(data) in your success function try logging response or response.length.

That should show if the data is indeed pushed to the array.

3

Thank you for the quick response, BenGitter. The ultimate goal of this function is to store all channel objects in the response array, which I intend to pass as a parameter to another function that will use that information to populate the page accordingly.

4

But all the data is correctly pushed to the response array?

5

I had a similar problem at first… I believe Ben Gitter is right about the diagnosis. You might want to read about promises.

My solution was to send my ‘success’ getAJAX function a callback function to process the data depending on what I was using it for. This ensured that I wasn’t trying to console.log or push data that wasn’t there yet.

You can see my solution in action here:https://codepen.io/moseschild/pen/PjZBWG

6

I seems to be pushed only at the point when I click the drop down next to the empty square brackets in the console. I.e the right-pointing arrow: >[]

7

I finally solved the problem by appending the result of each Ajax call to the DOM, thus building my html as the I go thought the loop that makes the calls. This is opposed to what I was trying to do earlier, which was collect all the results into an array, pass the array as a parameter of another function, which then populates the page. That would have actually been less efficient.

Thank you @MosesChild and @BenGitter for your responses. I have started reading about promises, I promise :slight_smile: :grinning:
Here is my final project: TwitchEpic. Thinking of adding a search function in the future. Cheers

8

Wow, you went deep into this one mr TeyimPila!! … great work. very inspiring.