Twitch.tv app-I'm having trouble with AJAX functions as they are asynchronous

1

Hi Guys,
I have been trying to work with two AJAX functions so that I can retrieve two JSON objects. As “.getJSON(…)” function is asynchronous my website is loading the channels of “twitch.tv” project randomly( and incorrectly too) . I have tried lots of methods like closure functions, callback functions, included the asynchronous functions within “when(…)…done(…)/ when(…)…then(…)” after reading lots of topics from stackoverflow and other websites. I’m still a novice and didn’t really understood those posts. I would be glad if someone can correct my code or help me with the code. Link:https://codepen.io/saicharan123/pen/VzXmwr?editors=1111 Following is the js code:

var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", `"RobotCaleb", "noobs2ninjas"];`

$(document).ready(function(){
  var streamObj, channelObj, channelUrl, streamUrl;
  for(var x = 0 ; x < channels.length; x++){
    channelUrl = "https://wind-bow.glitch.me/twitch-api/channels/"+channels[x];
    streamUrl = "https://wind-bow.glitch.me/twitch-api/streams/"+channels[x];
$.when(
$.getJSON(channelUrl, function(data) {
    channelObj = data;
}),
$.getJSON(streamUrl, function(data) {
    streamObj = data;
    })
).done(function() {
     if(!streamObj["stream"]){
        $("channel").append("<img src = " + channelObj["logo"]+"</img><br/><br/>");
        $("#channel").append("<img src = "+channelObj["logo"]+"></img><a href = "+channelObj["url"]+" class = 'text'>"+channelObj["display_name"]+"</a><span class='online'>Currently Streaming:"+streamObj["game"]+channelObj.status+"</span><br/><br/>");
      }
      else{
        $("#channel").append("<img src = "+channelObj["logo"]+"></img><a href = "+channelObj["url"]+" class = 'text'>"+channelObj["display_name"]+"</a><span class='offline'>Status:Offline</span><br/><br/><br/>");
      }
});
  }
 })
2

First things first. Fix you array in the top. Its syntax is all wrong in the end with mixed ` and ".

Now, about your requests. You misunderstood the use of $.when(). To simplify it, you are supposed to pass your requests there and handle them in the .done() method. Here’s the syntax:

// Get data from the two endpoints
$.when(
  $.getJSON(channelUrl),
  $.getJSON(streamUrl)
).done(function(channelData, streamData) { // handle the data they return here
   // do stuff with your data
});
3

Actually I’ve used "when(…).done(…) " action as you have said but the output it is giving is null.
I don’t think using ’ within " is allowed and my syntax seems right.

4

I tested your code with my changes and it worked just fine. Can you update it and post the code back?

5

It worked fine after adding the code $.ajaxSetup({ async: false }); at the start of my function and code $.ajaxSetup({ async: true }); at the end of my function.
Anyway, thanks for spending your time on this :grin:.

6

Keep in mind that async: false will stop the script execution in each request until it’s finished. If one of them hangs, you’ll have an issue. I’m just pointing out that you are mixing concepts together and you are not using them right. Lastly, $.ajaxSetup() is used to apply settings to future ajax requests so your second call to it, is unnecessary.

1 Like
7

This code will work and is the optimal solution, @saicharan. What trouble were you having when you tried it?