[HELP] Problem with undefined variable during a for loop/AJAX cal

JavaScript
1

Hello Campers!

I am currently building out my Twitch API project and I ran into an issue while looping over an array to make AJAX calls.

I created an array of channel names that I want to make a query on. The array is named streamArray. The for loop works for the purpose of making the ajax call (url+streamArray[i]), but when I try to $.append the elements to the DOM streamArray[i] is undefined.

How do I make it so that the object of streamArray’s current iteration is defined?

Please refer to the JS section of my codepen below. The problem section is commented with ###FREE CODE CAMP QUESTION STARTS HERE.

Thanks so much :slight_smile:

codepen:

2

@ArielLeslie

If(ArielLeslie.coffee == true){
console.log("I summon you!")
} else{
console.log("nvm")
}
3 
for (let i = 0; i < streamArray.length; i++) {

Add the keyword let so i retains it’s value at the time the AJAX call is made. Otherwise, it will only have the last value of i which equal to 10 which is one more than the highest index in your your streamArray. That is why the undefined shows up.

Why is i 10? Because $.ajax is asynchronous and allows other code to run while it waits for a response. While the first AJAX call is being made, the for loop has already finished, so when the response comes back from the first and other AJAX calls, i is already at its final value of 10.

1 Like
4

Thank you so much!

A follow up question: I am a bit confused as to why “let” stores the value and “var” doesnt (if I leave it as i=0 doesn’t that mean var i=0?) .

I need to go re-read up on “let” again.