Problem with Twitch App

Problem with Twitch App
0
#1

Hi,
I have a problem with Twitch app. It sometimes shows status, and sometimes doesn’t. And i don’t have a clue why. Also it does’t show Closed Accounts.
Any help would be appreciated.

0 Likes

#2

Can you share the code you’ve written so far, preferably in a CodePen (or other online editor)?

1 Like

#3

Let’s see the code and perhaps we can help. I remember sometimes different things not showing up if I didn’t request the correct info in the API calls. Spent hours with Dev tools open…

0 Likes

#4

check the object you’re trying to access, either use console log or postman or something else to format json objects

0 Likes

#5

That’s what you get when posting while tired XD. I forgot to post the link. Sorry.
https://codepen.io/ens0/pen/gwWPPN

Also i get the same name for all channels. (Its the last from an array).

0 Likes

#6

The problem you’re running into is that you’re running asynchronous code and expecting synchronous results. This can be one of the most confusing aspects of programming. What’s happening is that you’ve got two different calls to the server, and two different callback functions that each execute when the server responds. From the way it’s written, you’d expect the code to run thusly:

  • firstAjaxFunction();
  • firstAjaxCallback();
  • secondAjaxFunction();
  • secondAjaxCallback();

However, that’s not the case. Callbacks do not block, meaning that other code can run while we’re waiting for the server response. The reality is that your code could be executed like this

  • firstAjaxFunction();
  • secondAjaxFunction();
  • secondAjaxCallback();
  • firstAjaxCallback();

or

  • firstAjaxFunction();
  • secondAjaxFunction();
  • firstAjaxCallback();
  • secondAjaxCallback();

And that’s just per username. These four functions are run per username, and the same caveats apply to the order. What’s happening is more like this:

  • firstAjaxFunction(“brunofin”);
  • secondAjaxFunction(“brunofin”);
  • firstAjaxFunction(“FreeCodeCamp”);
  • secondAjaxFunction(“FreeCodeCamp”);
    // ... two seconds later
  • firstAjaxCallback(“brunofin”);
  • firstAjaxCallback(“FreeCodeCamp”);
  • secondAjaxCallback(“brunofin”);
  • secondAjaxCallback(“FreeCodeCamp”);

By the time the last callback has fired, the variables url, status, and name have all changed. In fact, by the time the first callback has fired, the forEach loop has executed and the variable name has changed, which is why everyone is ‘brunofin’.

There are a number of ways to fix this. The best (for now) is to use promises. My least favorite option would be to create a closure for each success callback, and call the second AJAX function inside the callback for the first.

 $.ajax({
      type: 'GET',
      //etc...,
      success: (function() {
        var currentName = name;
        var currentUrl = url;
        return function(data) {
              console.log(data);
              if (data.stream === null) {
                status = "Offline";
              } else {
                status = "Online";
              }

              $.ajax({
                 type: 'GET',
                 //etc...
                 success: function(data) {
                    //stuff
                 }
                });
            }
      }())
  })

I genuinely hate this option and strongly encourage you to use promises. Youtube will have some video tutorials on the subject, though I can’t recommend any one, but also look at the documentation I linked above. You’re going to want to make use of Promise.all(), which is the best thing since unicorn magic.

2 Likes

TwitchTv: help needed with variable scope
#7

Thank you for illuminating the subject for me :). I will dig deeper into promises then.

0 Likes

#8

I love it. Will look into this. Thanks

0 Likes