Twitch tv project, https://codepen.io/Kristians/pen/wpZKMG?editors=1010

Twitch tv project, https://codepen.io/Kristians/pen/wpZKMG?editors=1010
0

#1

I’ve been stuck trying to solve this problem for a few days now, can’t find anything online to help me. Would really appreciate help. If I take the second for loop out, all of the twitchStreamers[i] are undefined and returns offline. Please help!


#2

Can you explain what you expect your current code to do and then tell us what it is doing instead.

Do you want the second for loop or do you want it out?


#3

I want it out because its giving me too many outputs(too many logos,display names and status’) but if I take it out I can’t cycle through the var array twitchStreamers for my second ajax call.


#4

One huge problem I see right off is:

  for (i = 0; i < twitchStreamers.length; i++) {
    ajax1();
  }

Since the ajax1 function is going to loop through twitchStreamers and call the Twitch stream endpoint for each username in twitchStreamers, your code is going to have 64 calls to the API instead of just 8. You can execute the ajax1 function, but get rid of that for loop surrounding the call. The for loop should be inside ajax1 and encompass the first $.ajax call.

Also, I am not sure why you don’t just reference the twitchStreamers array you created at the top of your $(document).ready callback function instead of creating an identical array with the same name inside your first $.ajax call.

I think you should probably write out your algorithm for this project first by breaking it down into smaller pieces and then coding each piece (which will probably become a function) instead of trying to code it all at once.


#5

See my post above for why you are getting too many outputs.


#6

I have changed the code a bit but still stuck, the second twitchStreamers[i] doesn’t loop.Thanks for the help


#7

#8

What do you mean it does not loop? Tell me what line(s) of code you think should do something in particular and then describe what actually happens.


#9

I want the second AJAX call url to loop through twitchStreamers to get a proper url to call and extract data from , I’m just getting undefined , which I assume means it’s not looking properly


#10

To answer your question with your existing synchronous $.ajax calls, you can use the let instead of var in the following for loop. This will allow i to remain constant through both $.ajax calls inside the for loop.

for (var i = 0; i < twitchStreamers.length; i++) {

My question to you is why did you set async to false in your $.ajax functions? One of the main points of this exercise is to be able to deal with asynchronous functions. Making synchronous calls makes the page load much slower, because nothing can happen until each call is complete. In the real world of web development, you are expected to understand how to work with asynchronous functions. What if your twitchStreamers array had 500 usernames? Do you think any user is going to sit around and wait for your page to finally load?

Sorry for the rant, but I wanted to stress how important it is to learn this.


#11

Awesome, yeah it makes sense. Thank you so much!