Help me resolve this

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?

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.

@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.

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.
2 Likes

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

@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.

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!

1 Like

what is preprocessor?

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.

2 Likes