I’m close to getting my Twitch app completed, but I’ve run into a problem as usual. Seems to be an often thing when I’m working on my stuff. lolz
Anywho, I’m looping through the users and assigning parts of the API call to the HTML I’ve created. Problem is, I can’t seem to get my inactive streamers to show up. I have two if statements checking it the user is active, and if they are to show the link to their channel (which also isn’t working for some reason.) And if they are not active, to just show their info.
So here’s my pen - let me know what I’m missing. I’m hoping it’s something simple.
You already know that if data.stream === null then the user is offline. But for all requests no matter if the channel is online or offline, you do this:
//Stream Info
var stream = data.stream.channel.status;
var userName = data.stream.channel.display_name;
var icon = data.stream.channel.logo;
var url = data.stream.channel.url;
But because data.stream is null for offline channels, there is nothing to access.
Look at the JSON that is coming back. The properties that you try to access (data.stream.---) aren’t there.
You need the API request to the other route (which you had first, with data.stream). You can then check if a channel is online or not. If a channel is online you can grab the relevant information from the data.stream object, else you will have to make a call to the /channels endpoint.
Ok, I think I have my code back to how it was earlier. Glad I saved the Gist of my previous work.
Anyway, I tried to check against the channel being online and I still only get one channel showing, regardless of if it’s online or not. I think I understand what you’re saying, which is to check the API to see if the channel is active or not, then add the online or offline status and show the list of channels. But I think there’s still something wrong with the loop for it to only show one channel with the Offline status.
Please let me know if I’m on the correct track. I’ve been working on this all day and haven’t seemed to find a solution yet.
Just make sure to always have your browser console open (especially when you get unexpected behaviour). In this case the errors showed that the properties you were accessing are undefined.
Ah! Ok! I see where the problem was now! Wow! Guess I’ve been looking at this/working on this for so long I can’t seem to see the forest for the trees. lol
Thank you! I’ll see if I can get things working from here. And thank you for being so patient with me. I don’t want the answer given to me (which is what you did) but having that little bit of help had put me on the right path.
@BenGitter I’ve run into another snag. It’s two things that don’t seem to be working.
I can’t seem to get the channel link to open in a new tab/window correctly. When you click the link, it opens to an empty tab/window. Not a big deal, but it’s a little annoying.
I’m still having trouble getting the offline channels to show up in my feed. I believe I have everything set up correctly, but I can’t seem to get it working right. I’m most likely missing something again, but I’m not sure where it is.
I guess you commented out the AJAX call only for testing purposes, but you obviously need it. The URL you are using is wrong though. You should have /channels/ before the username. Then you should take a look at the console. It will show a CORS error.
After you get the URL right, you need to check which properties are available on the JSON that is coming back. You will see that the properties you are trying to access do not exist.
Currently it will try to run the AJAX call to the /channels/ route a few times with the same user. This happens because the first AJAX call takes some time before it checks if a stream is offline and needs another AJAX call. In the mean time, the for loop has already finished, stopping at the last user. So you will get several calls for noobs2ninjas (if this channel is offline), because that is the user where the for loop ended. Don’t bother with this before you fix the rest.
I do see where it’s a problem with Codepen with the new tab, so I’ll probably end up moving this to a github page once I’m ready to turn it in. I’m 99% sure that will fix most of the problems with opening a new tab to another webpage. Only reason I know that is from a similar thing happening on another page I made in Codepen, but I wanted to get a second opinion before I jumped to conclusions. So thanks for helping me out with that one!
I FINALLY got the /channels/ endpoint working correctly and was able to pull up the information for Freecodecamp so I could test it out and see what the areas were that I needed for my template. Aside from some CSS errors, I have the template laid out correctly. And yes, I did have the $.getJSON call commented out by accident when I was testing things, so I’m glad I was at least correct in thinking I need to have a second call for the /channels/ endpoint.
I think the best way for me to get the users that are not online is to store them in a separate array and call it up in a new $.getJSON(). I’m thinking the array will most likely be out of scope at this point, but I think I’m on the right track. Would probably need to do an arr.push() with the user names that don’t pass thedata.stream !== null. As much as I don’t want to have to loop through another array, that may be how I need to set things up in order for it to work. Or maybe I’m just getting tired of this challenge and need a break. Probably a little from col a, col b, and col c at this point.
Let me know if I’m thinking about this correctly. And thank you for all your help and patience with this. I do appreciate it!
So now that I know that, I’m trying to get the user’s that fail the if (data.stream !== null) to be pushed into an array in the else statement. I know I just need to push the results into a new array with:
var channelUser = [];
channelUser.push(user);
but I’m still getting ‘noobs2ninja’ as the only result. What am I doing wrong? I can’t seem to figure this one out at all.
First of all, you should put the var channelUser = []; outside the for loop, else you just empty the array every time you want to push something to it. This results in only one channel ending up in the array. The reason that you only see noobs2ninjas:
Another way is wrapping everything in a function, which would look something like this:
for(var i = 0; i < userList.length; i++){
var user = userList[i];
var fullURL = urlStart + user + urlEnd;
makeRequest(user, fullURL);
}
Where makeRequest() is a function containing your getJSON function. But since you pass user to the function, this will contain your actual user, and not the last user from the for loop.
I would suggest instead of pushing it to an array, to directly make the other request with the user which is now available. Otherwise you will need some way to wait till all AJAX requests are finished (to be sure all offline channels are pushed to the array).
Your commented out getJSON to the /channels endpoint is already working, so you will only need to change:
var channelUrl = "https://wind-bow.gomix.me/twitch-api/channels/" + channelUser + urlEnd;
to:
var channelUrl = "https://wind-bow.gomix.me/twitch-api/channels/" + user + urlEnd;
Yes! I got it to work! Finally! Thank you! I worked it out on my own and checked my results against yours and it looks the same. Thank you so much! Now I just need to figure out why my CSS classes are only half working. lolz
Thank you again for all your help and patience with me with working on all of this! I really appreciate it!
I’m working on getting the unknown users set up (mostly because I forgot that was a user story we needed to fulfill) and I have some weird errors showing up. I can’t seem to get the Twitch placeholder image (the one with the lightening bolt) to show up and I’m getting some weird undefined listings showing up for some reason. I think it’s due to where I have my if statement to check if there is an unknown user.
I don’t think I’m going to attempt the search like in the video, so I’m not worried about getting that done. Maybe if I revisit the app later on I will, but right now I just want to get my users showing up correctly.
Yes, you first append the info and then you check if the user is unknown. So, if the user is unknown it will first try to append some info (which there isn’t, hence the undefined error) and then it will add a “user not found” element, so you get a double (one undefined, one “user not found”).
You will have to first check if the user is unknown. If so: append “user not found”, ELSE: append standard info.
The link you are using for the image is broken, you will have to find another one.
Wow! Yeah that is why I’m getting repeat calls with my loop. All it takes is a second set of eyes to look at what’s going on. Plus I also need to learn how to take breaks while coding. I’m doing the 100 Days of Code Challenge and try to code 1 hour a day, but it always ends up going for multiple hours which leads me to getting frustrated and making silly mistakes.
Thank you again for your help and for being so patient with me. I think the only thing I need to figure out is why storbeck’s icon isn’t working. I’ll check the JSON call and see what exactly is showing up and go from there. Thank god for console.log() or else I think a few of us would be stuck all the time.
