Coding Journal 8 — Free Code Camp Twitch API Project

Welcome to coding journal 8! Today, I continued to work on the twitch API project on Free Code Camp. I got the API calls working properly, mostly, and started populating the page with data. You can see the scans of today’s coding journal at the bottom of this post.

 

I have to scan them again… PSA: you cannot upload .jp2 files. And renaming them “bladybla.jpg” does not fool the computer into believing that they are JPGs. No harm in trying, right?

 

Coding journal 8

Today’s plan was to,

  • Make an array for each type of data (one for names, one for logos, ect…)
  • Get the data and put it into the arrays.
  • After the arrays are filled, pass them to the display function.
  • Loop through the arrays and display the data in the display function.

Testing the Plan

I started implementing my plan with one piece of data, usernames. The plan worked, except that it didn’t take non-existent users into account. This is why we test with one piece of data before doing it with everything. The arrays were one item shorter than they needed to be (I only had one non-existent user in the streamers array that I made yesterday).

Fixing the non-existent User problem

First, I tried using an if statement to check if the object got was undefined or null. Can you guess why this did not work? The function inside the JSON get method does not run unless data is successfully gotten. I know that there had to be a way to do something else if an error message is received in the JSON thing like there is using AJAX thing, so I looked it up.

.fail(function(){}) was the solution. Just add this to the end of the success method and do whatever you would want to do if an error is received inside the function. I used this to push “NOTHING HERE” into the arrays at the index where actual data would go if there was any.

Populating the DIVs with Data

Remember the DIVs I appended to the streamers DIVs yesterday? Those are what I used to hold all of the data I got. I just threw it all into those DIVs.

Twitch API Project Free Code Camp screenshot for Coding Journal 8

Beautiful, right? The blue borders are just for me, I will remove them before the project is done. Thes doesn’t get prettier anytime soon, by the way. The next step is to get the stream data and throw it into the DIVs with the user data.

Is the User Streaming?

The API for data about live streams is in a different file then the data about the users, so a separate API function was needed. I put the streams function above the users one because the users one had the call to the display function and I didn’t want the script to stop getting data and start displaying things before it had gotten all the data for the last user in the streamers array.

I put the streaming data into arrays if the user was streaming, else, I put “NOTHING HERE” in the place where the data would go if there was any. I was about to test this but noticed another problem.

The URLs that I got, thinking that they were URLs for the user’s profiles, were actually URLs for more API stuff. Easy fix, though. instead of pushing the URLs to the URLs array, I pushed “twitch.tv/” concatenated with the user’s username. Later, I learned that the links won’t work unless you put the whole URL, you know, http, www, all that. It’s weird, though. I vividly remember excluding this stuff in links and having them work. Oh well.

where is that misspelling?

Something wasn’t working. I began commenting things out to find the problem but it wasn’t that obvious. After scrutinizing my code, I found the problem. I had added an extra i to preview (preiview, what is that?). Yes, at least 6 times I misspelled preview. Easy fix, though.

But the Problem You Try to Avoid  Will Show His Ugly Face

And now the last user is infected with the “undefined”. Why? Yea, I still haven’t figured it out yet. I made long streams of if statements to get rid of the problem but that just created new bugs. When I removed them, that last user was magically cured. This is temporary, though, I assume anyway.

Make the Data Look Good

Or try to, anyway. I started wrapping the data in tags. Things were going alright until I got to the logos. Some users do not have logos and that was a problem. I tried to give users who didn’t have a logo a default one but broke everything in the process.

Doing the Naughty

Yes, I looked at other people’s code. Just a peek, though! I found that they were doing the two API function thing too, so, that’s not my problem. I commented out the streams function, though, and everything else started working great. This is where I decided to stop for the night. Tomorrow, I will work more on it. I have some ideas about what is going wrong.

I hope you enjoyed reading this post. I enjoy reading other’s posts, too. Below, you can view the scans of today’s coding journal. I am also including the code. I thought it might be fun to look at later when I figure all this API stuff out. I forked my pen. This was the easiest way that I could think to do this on the fly. Enjoy.

BYE

Coding Journal 8 Scans

Coding Journal 8 page 1

Coding Journal 8 page 2


See the Pen FreeCodeCamp: Use the Twitchtv JSON API Fork For Coding Journal 8 by Cynthia Buck (@DoloresIpsum) on CodePen.


 

-view other journal posts relating to this project here-

Leave a Reply

Your email address will not be published. Required fields are marked *