forEach Function is not going through function correctly - TwitchApp

JavaScript
1

HI Guys, I need your help. I’m banging my head trying to understand why the Function is not going through if/else correctly.

(Codepen LInk)

//Users
var userList = [“ESL_SC2”, “freecodecamp”, “OgamingSC2”, “cretetion”, “storbeck”, “habathcx”, “RobotCaleb”, “noobs2ninjas”]
var counter = 0;

//Function
userList.forEach(getStreamData);

function getStreamData(){
$.getJSON(“https://wind-bow.gomix.me/twitch-api/channels/” + userList[counter] + “?callback=?”, function(data){
console.log(userList[counter]);

        if(data["_id"] = false){
          **console.log("false: No Channel");**
          $("#"+userList[counter]).replaceWith("Channel Not Found");
        }else{
          **console.log("Live Channel");**
          $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + userList[counter] + "?callback=?", function(streamData){              
            if(streamData.stream == null){
              **console.log("No live stream");**
              $("#"+userList[counter]).replaceWith('Offline <i class="fa fa-television twitchUserOffline" aria-hidden="true"></i>');
            }else{
              **console.log("Live Stream");**
              $("#"+userList[counter]).replaceWith('Live <i class="fa fa-television twitchUserLive" aria-hidden="true"></i>');
              
            }
                
          });
        }
     counter = counter + 1;
});

};

I use console.log to show me how the code is being executed, and it is jumping around and not executing in order that I would expect for if/else.

Console details:

“ESL_SC2”
“Live Channel”
“freecodecamp”
“Live Channel”
“OgamingSC2”
“Live Channel”
“cretetion”
“Live Channel”
“storbeck”
“Live Channel”
“habathcx”
“Live Channel”
“RobotCaleb”
“Live Channel”
“Live Stream”
“noobs2ninjas”
“Live Channel”
“No live stream”
“Live Stream”
“No live stream”
“No live stream”
“No live stream”
“No live stream”
“No live stream”

2

Hi,

There are two things which may be causing your problems.

On your first if statement you have:

if(data["_id"] = false)

I guess you want:

if(data["_id"] == false)

instead. When using just one equal sign you are trying to store the value of false in the field “_id” of your data object. When using two equal signs then you are making a comparison.

The other thing is not really a problem. It has to do with the way the $.getJSON works. The request for the JSON object is an async operation. Which means, the code after the json call gets executed without waiting for the end of the JSON call.

For example. By using userList.forEach, the function getStreamData is executed for each element of the userList. But it does not wait for the end of processing one element before starting the other.

The getJSON call gets made, and your callback function waits for the response. While the response does not arrive the rest of the code outside the callback keeps getting executed. So, depending on how fast the responses come, it can happen that while on the middle of processing one response the other is already finished, and you have several callback functions executing at slightly different times, which makes the console.logs appear to be all mixed up.

I am a bit confused with my own writing. I hope I managed to clarify a bit of what is going on :slight_smile: