Retrieving Logos When Null

I’ve seen other people manage to retrieve logos when data.stream is null and I cannot quite work out how they are doing it.

Can anyone point me in the right direction?

http://codepen.io/jameswinfield/pen/OXwwkb

Thanks
James

1 Like

Hey, when the data.stream is null, you will have to make another JSON request to this url: 'https://api.twitch.tv/kraken/channels/' + channel. From that you can retrieve the logo with: data.logo.

1 Like

I’ve updated my code to include the following:

var url = ‘https://api.twitch.tv/kraken/streams/’ + channels[i] + ‘?callback=?’;
var url2 = ‘https://api.twitch.tv/kraken/channels/’ + channels[i] + ‘?callback=?’;

$.getJSON(url, function(data) {

var game, status, logo, displayURL, displayName, stream;
if (data.stream === null) {
$.getJSON(url2, function(data) {

status = "Offline";
console.log(data);
logo = data.logo;    
 })
 if (data.logo === undefined) {
   logo = "https://www.theyearinpictures.co.uk/images//image-placeholder.png";
 }

Am I doing something stupid?!

Well running two JSON requests can have annoying behaviour. You will have to search about promises, because now your second JSON request is run several times with the same username.

Hmm I’ve read about promises now and not at all clear what I would need to do - http://www.html5rocks.com/en/tutorials/es6/promises/.

Do you think I’d be best to split my code up so I ran streams and channels in separate sections?

1 Like

Thanks for asking this question. I was wondering the same exact question. I’ll be using this information later to fix my twitch app!

Can’t really explain it, so here is my code.

Basically, what the idea is:

  • If your offline (you check that already)
  • Append everything to the document including an empty image (or placeholder)
  • And give it an ID
  • Then call a function with as parameter the channel name. For example: getLogo(channels[i])
  • Then in that function, make a JSON request
  • On succes, do something like this: $("#IDofDiv").attr("src", logoURL)

Yours is by far the best example I’ve seen - I hope I am not expected to know all of this already! Lots of your code I don’t understand.

1 Like

Why to use promises?
When twitch return state of profile so your getJSON actually succeed even profile doesnt exist. So u can fetch data inside ( in inner getJSON ) your logo
U didnt use promises

Correct, I used the method I described in my last post in this topic. I would be interested to see an example of this, because when I tried to do so, the second JSON call was executed several times with the same channel name.