Stuck On Twitch.tv Api Project

Stuck On Twitch.tv Api Project
0

#1

Im stuck at the api call for twitch.tv
can anyone please tell me what is the error:

$(document).ready(function(){
var url=“https://wind-bow.gomix.me/twitch-api/streams/freecodecamp”;
$.getJSON(url,function(data1){
if(data1.stream===null){
$(“fccstatus”).html(“FreeCodeCamp Is Currently Offline”);
}
else{
$(“fccstatus”).html(“FreeCodeCamp Is Currently Online”);
}
})
});


#2

I just finished with this challenge yesterday. Since I can’t see your code and I don’t know what particular problem you are facing I’m going to make a couple of guesses.

Guess #1 - Is fccstatus a class or id? If so it needs to be $(".fccstatus") or $("#fccstatus").

Guess#2 - I noticed when I was working on my project that lots of people added a callback to the end of the url. https://wind-bow.glitch.me/twitch-api/streams/freecodecamp?callback=?

I tested that and it looks like you get the same results either way. But it wouldn’t hurt to try.


#3

tnx a lot !!!
I didnt notice fccstatus and tnx for the api link


#4

Can anyone Help me on how to access logo,message and status:
Html:


JS:


#5

The channels endpoint is what you need, and the URL will be identical to the URL using streams endpoint - except replace streams with channels.


#6

The url doesnt get changed…It gets stuck on the last value of the array I dont know why


#7

Im getting this as the output when i print the url through the loop


#8

how to access logo,message and status

The channels endpoint is what you need, and the URL will be identical to the URL using streams endpoint - except replace streams with channels.

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

The response will contain logo, message, and status


#9

Hey. You are nesting asynchronous requests and for loops. The loops will not wait for the requests to be finished so while “data2” is being requested, the loop continues until the end, therefore “following[i]” will always be the last one.

A solution would be to declare your url outside of the loop and then attach the followers’ names to it inside of the loop. You don’t need two loops and you need to make another request to check if those followers’ channels are online. Also, try using more descriptive variables’ names; it’ll help you debugging any issue more easily.

I found your codepen (next time link it yourself, it’ll be easier for you to get help), refactored your code to make it work and added a bunch of comments below. Click the spoiler to see the code only if you can’t get to the solution on your own:

$(document).ready(function(){
  
  var masterChannel="freecodecamp"; // The channel to get the followers from
  var followersUrl="https://wind-bow.glitch.me/twitch-api/users/"+masterChannel+"/follows/channels"; // URL to get the followers
  var channelsUrl="https://wind-bow.glitch.me/twitch-api/channels/"; // URL to get channel's info
  var streamsUrl="https://wind-bow.glitch.me/twitch-api/streams/"; // URL to get stream's info
  
  $.getJSON(streamsUrl+masterChannel).done(function(live){ // Get stream's info for master channel
      $("#fccstatus").html(!live.stream ? "FreeCodeCamp Is Currently Offline" : "FreeCodeCamp Is Currently Online");
  }); // End Get stream info
  
  $.getJSON(followersUrl).done(function(followers){  // Get followers
    
    for(var i=0;i<followers.follows.length;i++){  // Followers' loop
      var followerName=followers.follows[i].channel.name; // Name of each follower
      
     $.getJSON(channelsUrl+followerName).done(function(channel){ // Get channel's info for each follower
       var channelUrl = channel.url; // Channel's URL
       var channelName = channel.name; // Channel's name
       var channelUsername = channel.display_name; // Channel's display name
       
       $.getJSON(streamsUrl+channelName).done(function(live){ // Get stream's info for each follower's channel
         var status = !live.stream ? 'offline' : 'online'; // If .stream isn't null\false it's online, otherwise offline
         $("#followerinfo").prepend( // Prepend the HTML
            "<div class='row well'>"+
              "<div class='col-sm-4'>"+channelUsername+"</div>"+
              "<div class='col-sm-4'>"+
                "<a href="+channelUrl+">"+channelUrl+"</a>"+
              "</div>"+
              "<div class='col-sm-4'>"+status+"</div>"+
            "</div>"
         );
       }); // End Get stream's info
       
     }); // End Get channel's info
      
    }  // End followers' loop
    
  }); // End Get followers
  
});

#10

Thank you very much for the answer…But I’m Getting an error stating :server responds with 403()…
When I googled it people said it was cors problem. Should i add a callback after the api link…
here is the error:

Here is the link to the code:

https://codepen.io/sarath1632/pen/aLVyLQ?editors=0002


#11

This is not a valid API url

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

Reference: https://wind-bow.glitch.me/


#12

You have a typo in the URL. It should be “users” and not “user”.


#13

Thank You It worked. Simple Mistake :frowning:


#14

I have one more error. When I just copied and edited for live channels an error is shown.I just edited the display like
if(status===“Online”){
then display it;
}
But a 404() error is thrown.Please Help me Out.

Here is the link to the code: