Running of multiple functions inside a forEach loop

1

while working with the twitch api, i had to use two ajax requests inside a forEach loop. The two ajax requests have their respective callback functions. the following outlines the structure of my program:

twitchStreamers = ["name1","name2",...];
var language, views="", html = "";
//var status;
twitchStreamers.forEach(function(streamer) {
   // some code
   $.getJSON(streamURL, function(streamData) {
      var status;
      // some code
      if(condition){
         status = "some value 1";
      } else if(condition) {
         status = "some value 2";
      } else {
         status = "some value 3";
      }
      $.getJSON(channelURL, function(channelData) {
         // some code
         // access value of status
      }) // end of second ajax request
   }) // end of 1st ajax request
} //end of forEach loop

full code

I have some console.log statements in both functions. I was of the impression that both the functions would run simultaneously in each iteration. But examining the console shows that the first getJSON callback function and the second callback function are run separately, (the second is run after the first is run n number of times until completion). Why is that so? And how does the variable status storing a distinct value in each iteration of the first function convey the correct value in each iteration of the second function?

2

I think I see what you’re trying to do. What you want to do is to pass your second callback as a callback to your first callback.

Yeah. That’s why they call it callback hell.

Alternately, you can call your second callback from within your first callback, down at the end of the function. That would work as well.

3

thanks for your reply. What i have done hear works perfectly. I just want to understand why does it work the way it does. And the way it does is what i have described in the question.