Minor twitch api difficulty & question

1

Here’s my codepen:

Here’s the relevant code:


for (var user in users) {
  var current = users[user];
  console.log(current);
  $.ajax({
    url: "https://wind-bow.glitch.me/twitch-api/streams/" + current, //replace 'streams' with 'channels' to get info for offline channels
    type: "GET",
    success: function(data) {
      // console.log(JSON.stringify(data));
      if (data.stream !== null) {
        $(".container").append(
          "<div class='row indiv'> <div class='col-md-1 emblem'><img class='logo' src=\"" +
            data.stream.channel.logo +
            "\">  </div> <div class='col-md-2'> <a href='#'>" +
            data.stream.channel.display_name +
            "</a></div> <div class='col-md-9'> <p>" +
            data.stream.channel.status +
            "</p> </div> </div>"
        );
      } else {
        $.ajax({
          url: "https://wind-bow.glitch.me/twitch-api/channels/" + current, //replace 'streams' with 'channels' to get info for offline channels
          type: "GET",
          success: function(data2) {
            console.log(data2);
            $(".container").append(
              "<div class='row indiv'> <div class='col-md-1 emblem'><img class='logo' src=\"" +
                data2.logo +
                "\">  </div> <div class='col-md-2'> <a href='" +
                data2.url +
                " '>" +
                data2.display_name +
                "</a></div> <div class='col-md-9'> <p>Offline</p> </div> </div>"
            );
          }
        });
      }
    }
  });
}

If you look at the codepen, you can see that noobs2ninjas (the final name in the users array) repeats for every user that is offline. Why is this happening?

  1. Is it normal to have an ajax call within an ajax call? Feels like it’s too nested and that i should be doing something else (and maybe it’s causing my initial problem?)
2

You have an async problem with current in the success function. Every turn of the loop, variable current changes value and an asynchronous ajax call is fired. At the end of the loop, current's value is “noobs2ninjas”.

Some time later the success function of the various ajax calls is triggered. In some cases that triggers another ajax call with the value of current being used in the query url. current is still “noobs2ninjas” so the query is made with url = “https://wind-bow.glitch.me/twitch-api/channels/noobs2ninjas”.

It’s normal to have an ajax call inside another ajax (or to be more general callbacks inside other callbacks), although when there are too many it becomes unwieldy (“callback hell”). There are ways to deal with that. Techniques include promises and async/await.

1 Like
3

I’ll try to do some more searching/reading on that and probably async in general. I’m wondering how needing to call two different URLs will affect my difficulty, but hopefully the searching/reading sorts it out!

4

I set async to false and it solved the problem. Is this an acceptable solution or just a band-aid?

5

Async set to true will be faster. Also, you need to learn how to deal with asynchronous functions.

All you need to do is change one line:
Change the following:

var current = users[user];

to

let current = users[user];
1 Like
7

Thanks a ton for the help, @camperextraordinaire . Did some reading on let and will check out the MDN template literals link!

8

implemented template literals in my wikipedia search project as well, and it solved a problem i was having. (The final search response wasn’t being formatted like all the others, but it turned out fine after i just changed it to a template literal.)

so…THANKS AGAIN!