Help with my Twitch TV app

Hi everyone,

I’ve been stuck for weeks on my Twitch TV app. I’ve been reading more about events, JSON and JQuery but I’d like to finish it as soon as possible because I want to move on to the next algorithms challenges.
So here’s what I have done so far. Bear in mind I’ve done it pretty much by myself: I didn’t look at any code and I just used what we learn in FCC (that wasn’t a lot) and my own research online.

It basically doesn’t work properly. The channels don’t always show the status, sometimes you refresh the page or do whatever and the last 4 don’t show the status.
The online/offline buttons don’t work.
Ignore the CSS, that’s my strong suit so I always leave it for last. The only CSS I added was just to visualize better.
Can you please give me a hand here? I don’t want you to rewrite my code, just point me in the right direction: where am I getting something wrong and what can I read up on to figure out how to fix it.
All the other projects where fairly easy but this one is blowing my mind for some reason and I’ve become stuck. I’m eager to move along with FCC!

Thank you all so much in advance!!

Cheers,
Virginia

Part of your problem is that you are only making a single call to the stream endpoint. You should be nesting the 2nd $.getJSON inside the the for loop’s $.getJSON.

If you put a console.log(APIstreamurl) after the following line, you will see you are making a call to the streams endpoint with the value undefined. Why is this happening? When the for loop completes, the value of i is 8 and since there are only the indices 0 through 7 (inclusive) in the userrnamesArray, the reference to usernamesArray[8] (in the above following line returns undefined).

var APIstreamurl = APIstemurl + "streams/" + usernamesArray[i];

When the $.getJSON call is made to https://wind-bow.glitch.me/twitch-api/streams/undefined, data1.stream will be null, so “Offline” gets appended to all of the td elements with class=“status8”. And since all of td elements displaying the status have the same id=“status8”, they all show the same value. Why do they have the same id? Because $.getJSON is asynchronous, so it does not pause and prevent other code from executing while waiting on a response to come back. So, by the time the very first $.getJSON call (using “ESL_SC2”) actually gets a response back, the for loop has already completed, so i has a value of 8 when you assign the create string to html in the callback function.

What to research to help you out? Read about let vs. var and also consider moving the 2nd $.getJSON inside the first $.getJSON callback function.

1 Like

Ok, I started over using ajax . I did this:


Obviously it won’t work because “response” is different the second time, but I just don’t know how to make it work. I tried Ajax this time because I followed an intro to Ajax course and wanted to try it out, but if jQuery is a necessary I can write it again.
I see what my problem is, and I fixed the problem I had before where all the status td’s had the same name, but my main issue is I don’t know how to nest two ajax calls (or getJSON for that matter).
How can I go about this?

EDIT: I think I fixed it now, but why are they all offline? I tried with other channels that are streaming and I keep getting “null”…

EDIT2: rewrote it twice with jquery and i still get the same issue: