Help me resolve this

Help me resolve this
0

#1

Here is my twitch.tv project (work-in-progress).
https://codepen.io/verv0eren/full/yaYAQg/
If you will run it, you will see that streamers[i] , a string array assigned to cell2.innerHTML is not working as it gives us undefined in the page. Why is this happening?


#2

You’ll have to do different things for offline and online users, since what you get for online users differ greatly from that of offline users.


#3

@kevcomedia I know that & I am gonna do it later, first I want to make it work for online users. And if you can see, it’s not working either for online users. Second, I am not getting this from JSON data fetched, usernames (2nd column) are already collected by me in the streamers array.


#4

Oh, sorry I didn’t see the undefined next to the logos :pensive:

Try replacing var in the for-loop with let.

The reason is that, if I get it right, the callbacks are called some time after the for-loop finishes, at which point i is now equal to streamers.length. i retains its last value after the loop finishes looping. The callbacks will try to get what at’s streamers[i], but since i is out of bounds of the array, you get undefined.

You have two options:

  • Wrap the contents of the for-loop in an IIFE, which can get gruesome if the contents of the loop is large.
  • Replace var with let. By doing so, each run of the loop has its own copy of i.

#5

Help me now @kevcomedia. Both parts (online users and offline users) are written. The only problem remains is of usernames.


#6

@kevcomedia
Wow! let really works! Btw I have found the usernames (they are “keyed” display_name) from json data and used them instead. But to know if what you have said, works. I forked the original project and replaced var with let. And it really works. Thanks a lot for I found out new things here.


#7

A note on using let: You need to use a preprocessor to make it work in all browsers. It’s a part of the new version of JavaScript, ES6, that isn’t yet fully integrated into all browsers, so the preprocessor will re-write all of that newer code into older code that does the same thing. Setting up CodePen to use a preprocessor is dead-simple.

  1. Click the gear next to JS at the top of the editor

  2. Select ‘Babel’ from the ‘JavaScript Preprocessor’ dropdown.

That’s it!


#8

what is preprocessor?


#9

Preprocessors transform source code into something that can be used by browsers. For example, Babel is a JS preprocessor that transforms ES6 JS source code into a new js file that’s compatible with older browsers. It basically allows you to code in ES6 JavaScript (which is awesome! :wink: ) while knowing that it will run fine in all browsers.