Twitch api multiple streams, FCC new path not working

#1

Hi,

Guys i have been stuck on the task for 5 hours now, i am using this url to get json from also i add the new alternative url provided by FCC to over come key issue , but i keep getting 403 error -

https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2 , this is a sample url(it works )
But if i add more strams separed by comma it does not work

i use, i also do not know how to add more streams, where am i going wrong , can you please suggest i use pure JS like this

///////----------------------------
function allStream(){

var myRequest = new XMLHttpRequest();
var url = “https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2”;
myRequest.open(“GET”, url, true);
myRequest.onload = function (){
var ourData = JSON.parse(myRequest.responseText);
console.log(ourData);

};

myRequest.send();
}

/////------------------------------------------------

Thanks

2 Likes
#2

You need to make a request for each stream individually. You can’t get data for multiple strings. Here is the details of the API. The FCC one, is a proxy for this.

#3

@TheGallery - thanks a lot , but from what i can see the twitch api provides a real straight forward way to call multiple streams with comma separated and they do get called if we use twitch, so does the FCC API depreciates that ?

Also can you tell me how can i loop and add JSON files in one file and then loop again to find which stream is on or not , i cannot seem to find any such info in prior FCC exercises i have done …

Thanks a lot for your valuable time …

Regards

1 Like
#4

Apparently there is a newer API version than the one I used when I did this project. You should try with FCC’s proxy and see what response you get back. I am not sure if you can use it the way you want.

Your second question confused me. Do you want to bundle all your response data in one object?

#5

@TheGallery - thanks again . This is what i am trying to do, i get the urls of all streams , but i only get the details of the last stream …

////=======================

var myRequest = new XMLHttpRequest();
var streams = [“ESL_SC2”, “OgamingSC2”, “cretetion”, “freecodecamp”, “storbeck”, “habathcx”, “RobotCaleb”, “noobs2ninjas”];
function allStream(){
for (var i = 0; i < streams.length; i++){
var url = “https://wind-bow.glitch.me/twitch-api/streams/” + streams[i];
myRequest.open(“GET”, url, true);
myRequest.onload = function (){
ourData = JSON.parse(myRequest.responseText);
console.log(ourData);
};
}
myRequest.send();
}

/////====================

Can you please suggest how i get all the json return and then find which is on and which is off …

Regards

#6

That’s because when your for loop finishes, your myRequest is set up to get data for the last stream. It doesn’t create an array of requests. It only saves the last one. You have to use send() for every stream.

#7

@TheGallery - Thanks a lot for letting me know this logical error, however even when i am putting the send inside the loop, either it is not showing any results or just the last record, where exactly do i need to put in , can you please guide me here …

Thanks again …

Regards

#8

I read it the same as you, @jinisner , and banged my head on the wall trying to make just one call with the comma-delimited list. It did not work for me, but as @TheGallery says, individual calls proved necessary - and I also wondered if it was an API version issue. I saw reference to V3 and V5. I’d be curious to know if anybody found a way to send a list.

E2A: BTW, I used the $.getJSON() approach instead of the XMLHttpRequest route.

#9

@spoxox - Honestly this is a very confusing project , the FCC keeps adding new guidelines and changes for this one, they must add some thing workable here, as one loses confidence being stuck on one task for so long …

Regards

#10

Ok guys , so i am super confused now, i re red the whole project and my questions are

  1. Do i need to more then one stream like freecodecamp, ESL_SC2 etc or i can use something like -

https://wind-bow.glitch.me/twitch-api/streams/freecodecamp

as if this is the case its fine, i know what to do here …

2)Does this below point -

User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.

Means i need to do this —

https://wind-bow.glitch.me/twitch-api/users/freecodecamp/follows/channels

which means access the followers and display them…

I was thinking that i need to do something else …

Kindly guide …

Regards

#11

The project is not the problem. You are defining one xhr object (outside of the loop) and that one xhr object is doing its job.

So, put the var myRequest = new XMLHttpRequest(); inside the loop, you would say. Yes; but that won’t work either. Or, well, it will but not completely. Xhr requests are asynchronous by default. You can’t be sure that the requests (or even the initialization of the XHR) will be done before the loop is done (in fact, if you try the code below, you’ll have different results everytime).

var streams = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var myFunc = function() {
  for (var i = 0; i < streams.length; i++){
  var myRequest = new XMLHttpRequest();
      myRequest.open("GET", "https://wind-bow.glitch.me/twitch-api/streams/"+streams[i], true);
      myRequest.responseType = 'json';
      myRequest.onload = function (){
          console.log(myRequest.response);
      };
      myRequest.send();
  }
}
myFunc();

What is needed here is an IIFE and some closure to make sure that every IIFE will have its own “i” and its own xhr object.

var myFunc = function() {
  for (var i = 0; i < streams.length; i++){
    (function(i) { // This i is a parameter of this IIFE and can't be changed elsewhere than inside of it (closure)
  var myRequest = new XMLHttpRequest(); // Same goes for this variable
      myRequest.open("GET", "https://wind-bow.glitch.me/twitch-api/streams/"+streams[i], true);
      myRequest.responseType = 'json';
      myRequest.onload = function (){
          console.log(myRequest.response);
      };
      myRequest.send();
    })(i);
  }
}

This way, at each iteration of the for loop, a function will run with its own “i”, creating a new xhr object, doing the request and then moving to the next iteration.

1 Like
#12

You don’t need to show the followers, if they are streaming you can just show the game they are streaming and it’s fine. What you need to do, is loop through your channels, make a request in each loop then add the data for that channel in the page (inside the loop). There are ways to get all the data together before adding them to the page but you either need to make synchronous requests which is a nono or you need to use promises.

#13

@noyb - thank you so much for explaining the logic of closure, so basic but no where in the tutorial at FCC so far atleast …I am getting different values now …

I just need to know one thing will i need to to do this in every loop in javascript ?

@TheGallery - i have just moved on i will update on this project soon …thanks again for your time

Regards

#15