Followed Channels are Live Script


#1

Well, from the error message that I’m getting, I’m guessing my API is out of date - problem is, I’m not savvy enough to know WHERE to fix it or HOW to fix it. I just know it’s broken.

I have a list of channels that I follow, and when they go live, I have a special section on my Wordpress website that displays a linked badge so my viewers can go to their stream. Now, I’m getting a 401 error
Failed to load resource: the server responded with a status of 410 ()
And when I copy the URL that should be pulling the JSON data, I get this error:
{"error":"Gone","status":410,"message":"The API version you are looking for is in another castle. See https://dev.twitch.tv/docs"}

My code is a bit haphazard, so I’ll try to organize this as best as possible:

HTML


There are no friends of WHP streaming live at the moment.

Please check back often for updates.

JS
let usernames = [“streamerA”, “streamerB”, “streamerC”, “streamerD”,. “streamerE”];
let cb = ‘?client_id=CLIENT_ID&callback=?’;
let url = ‘https://api.twitch.tv/kraken/’;
let liveStreamers = 0;

usernames.forEach(function(channel, i) {
	function makeURL(type, name) {
      return url + type + "/" + name + cb;
    };
	
    jQuery.getJSON(makeURL("streams", channel), function(data) {
      let game,
      status;
	  if (data){
		  if(data.stream === null) {
			game = "Offline";
			status = "offline";
		  } else if(data.stream === undefined) {
			game = "Account closed";
			status = "offline";
		  } else {
			game = data.stream.game;
			status = "online";
			liveStreamers++;
		  };
		  
		  jQuery.getJSON(makeURL("channels", channel), function(data) {
			  var logo = data.logo != null ? data.logo : "images/twitch-favicon.png",
				name = data.display_name != null ? data.display_name : channel,
				description = status === "online" ? "" + data.status : "";
				if (description){
					var html = '<div class="online p-2"><a href="' + data.url + '"target="blank" class="d-block d-flex align-items-center"><div class="text-center"><div class="logo-td"><img src="' + logo + '" class="logo"></div></div><div class="text-left"><span class="d-block stream-name">' + name + '</span><span class="d-block stream-desc">' + description + '</span><span class="d-block stream-game">Playing: ' + game + '</span></div></a></div>';
				    jQuery("#users").append(html);
				}
		  });
	  }
    })
    .always(function() {
		if (i == usernames.length - 1){
	        console.log(liveStreamers);
	        if (liveStreamers == 0){
	           jQuery('#users .no-streamers').removeClass('hidden'); 
	        }
	    }
	});
});

Hopefully someone can help me out, and hopefully it’s a simple fix. Thanks in advance


#2

You need to read

And adjust accordingly

You need to lookup how to send headers with a jQuery.getJSON request.

A quick google returns