Twitch Tv - hooking up name and stream

1

It really bugs me that I can’t find the solution - I’m not even sure where to look.

I can have the offline/online status but it doesn’t iterate through all users, which means I get the same status for everybody (i.e. online OR offline).

Another weird thing is that sometimes it will be ALL offline, sometimes ALL offline.

I suppose it has to do that the offline/online status in my function isn’t linked to a particular user. I’ve tried to solve that (for loops, nested Ajax, …) but to no avail.

Can someone show me in the right direction? Here’s my [pen] (http://s.codepen.io/timotheap/debug/PbLWmW). - the CSS is just to see what’s going on.

2

Where is the code? the link to GitHub doesn’t work.

3

I haven’t put it on Github yet, that’s why I put everything on Codepen, sorry for the confusion.

4

Could you add a console.log with the returned data? (the array of objects)

Edit: I’ve added it myself, however an object looks like this:

Object
_id
:
30220059
_links
:
Object
bio
:
"For standings, schedule, and results, visit http://www.intelextrememasters.com/"
created_at
:
"2012-05-02T09:59:20Z"
display_name
:
"ESL_SC2"
logo
:
"https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg"
name
:
"esl_sc2"
type
:
"user"
updated_at
:
"2016-12-20T16:04:27Z"

Where is the stream data?

5

It’s not in the first Ajax request, it’s in the second one.

If I first use the stream request, I don’t have the username etc so I started by the users request.

[edit] I thought I could use the ID to hook up both requests but I don’t know how. I’m obviously missing something…

6

Hey @timotheap,

First things first, Instead of having your ajax call in a loop, move it into its own function.

From within your loop you can pass the username [i] to the ajax function as an argument.

You only need to make the ajax call once and you can do anything you need for this challenge with the response.

You can of course make more calls if you want to get a bit fancy, but the info you need for the challenge is in the response you’re already getting.

Cheers

Mark

7

I believe I’ve tried that already without success but I must have missed something. I’ll try again, thanks !

8

$.getJSON('https://api.twitch.tv/kraken/streams/' + STREAMER_NAME, function(channel) {

Use name instead of Id

9

I do make an Ajax request for streams (the second Ajax request in my code), but I think it’s in the wrong place and so it doesn’t iterate properly and doesn’t return the appropriate status offline/online for each user.

I’ll try to take my Ajax request out of the loop…

10

Hey @timotheap , did you know you can analyse your code in codepen? click the little arrow icon in the corner of the editor.

It works exactly like linting which you might use when you get to using an editor - and they will all tell you off for putting a function in a loop!

11

Oh dear, you’re right… but I have 2 For loops and 2 ajax requests - now I’m totally confused as to where I should put any of it. When I get lost like that I usually start from scratch again - but I’ve already done that three times.

[Edit] Wait, wait, ok, I’m gonna get this maybe not tonight but that’s fine, I just wanted something I could work with and I can work on that.

Thanks a bunch!

1 Like
12

Use your loop to iterate the array and then pass the goods ([i]) to a separate function to do the actual deed (ajax call, or DOM manipulation) :slight_smile:

So in effect you want separate loops feeding [i]'s to functions.

I can give you some hints if you like, but I know you like to like to figure these things out for yourself

1 Like
13

You can always try to use another library to make requests, personally I don’t like the way one does it with Ajax, you could check axios.

14

I’ll definitely have a look at that later - but not this time ! Just for the three apps I’ve had to watch Intro to Ajax, Intro to jquery, and some videos on Youtube and I actually like it (ajax)… I’m not strong enough to stray so soon ! But thank you for the info.

15

Ok I think it’s clearer in my head with this last explanation. Yes, I think it is (sorry, I’m thinking and writing at the same time).

Thanks a lot - I really hope I can fix it now.

[edit] it’s just…I find it really puzzling that I can something in a for loop, and that a function outside that will “recognize” my i. Damn it I’ve got to continue reading YDKJS .

16

Haha, you’re welcome, I’ll try to finish the random quote generator today and start working on this Twitch project :slight_smile:

1 Like
17

Thats Ok @timotheap, it will click.

Don’t look at this if you want to figure it out yourself! Its just a quick demo of how to pass info between functions.

[details=Summary]You see in this loop, I iterate the array and then use that info to complete API URL. Then I call my fetch function (which is the actual API call). When I call my fetch function I include the url var as an argument.

  for (var i = 0; i < userChannels.length; i++) {
        var channel = userChannels[i];
        var url = 'https://api.twitch.tv/kraken/streams/' + channel + '/?client_id=YOURIDHERE';

        //initiate API call
        fetch(url);
    }

My fetch function is awaiting the url, because I told it to expect something as an argument.

function fetch(url) {
    //api call using url goes here
}

When you create a function, if you need some info passed to it for it to work, say so by putting it in the parenthesis. You can add more than one.

For instance -

function fetch(url, channel){
   //API call with the url
   // console.log(channel + ' has been called')
   callAnotherFunctionWithThe(response);
}     

for (var i = 0; i < userChannels.length; i++) {
    var channel = userChannels[i];
    var url = 'https://api.twitch.tv/kraken/streams/' + channel + '/?client_id=YOURIDHERE';
     //initiate API call
     fetch(url, userChannels[i] );

}

[/details]

Hope that makes a little sense at least!

18

Thanks I’ll keep it for later, either as a reward if I’ve managed or as help if I don’t :slight_smile:

1 Like
19

Well, I had a look because I wasn’t clear at all with that…and your explanations are great - and I thought I’d be ok.

But I’m still having the same problem as before: when I call to get my stream status (offline/ online), my function doesn’t iterate through the array of users.

Is it because I’m calling the second function after the first one?

pen

Any chance you could help with that? I thought it was because I was comparing with “null” but that doesn’t change the fact that it only prints for the last user in the array…

20

just looking now, you nearly got this.

in fact you did have it but you also have extra’s!

I’ve forked it and cut it down a bit.

http://codepen.io/mpjones/pen/MbxvBw?editors=0010

I also broke your mustache in my version… but the logs are there!

1 Like