Retrieving Logos When Null

Code Feedback
1

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
2

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
3

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?!

4

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.

5

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
6

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

7

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)
8

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
9

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

10

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.