.append on Twitch API challenge

1

Hi i am working through the twitch API challenge, i am doing fine however i have got to the point where i can get most of the data i want onto my document with the .append function. I have noticed that when i refresh the browser the data does not work through the channels array periodically. The channels information is being displayed in a random order? is this due to loading times? if so how do i stop this from happening?

many thanks

  $(document).ready(function() {
var channels=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
    function list() {
      channels.forEach(function(channel){
          $.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+channel+"?callback=?", function(json) {
              var status = ""
                var game =""


                if(json.stream === null){
                  status = "Offline";
                }
                else
                  {status = "Online";}

                  if(status === "Online"){
                    game = json.stream.game;

                  }


                      $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/"+channel+"?callback=?", function(data) {
                      var link = data.url
                      var logo = "<img src='"+data.logo+"'>";
                      var html ="<h1>"+status+"</h1><h1>"+game+"</h1><a href='"+link+"'>"+logo+"</a>";
                            $(".main").append(html);
                        });
      //  console.log(status + " "+ game);




});
});
}

list();







//  https://wind-bow.glitch.me/twitch-api/streams/freecodecamp?callback=?
//  https://wind-bow.glitch.me/twitch-api/channels/ESL_SC2?callback=?
});
2

Essentially, yes. There’s no guarantee that you will receive data in the order you request it. It is possible to write code that enforces this order, but I don’t think it’s worth your time. It would involve a significant rewrite of the entire app.

1 Like