Hi everyone,
I am stuck in the last part of this challenge. I am calling an endpoint to get channels info and update my html, which is now really fine.
Then I am calling another endpoint to get channels statuses. But now, I have no clue how to loop over the streamsJson and then loop over my channels html and update the statuses if the channel’s ID matches.
Would be great if anyone could help 
Hello, @HaceneNasseur! First of all, great work on your design, colors, etc. Looks a lot better than mine! Hahaha. Anyways, I was a bit confused as to what was going on in your JavaScript (with an ajax in an ajax?), but the main thing I noticed was that you were modifying each channel html manually. There is a much, much easier way to do this!
Firstly, what I’d recommend is that you break down your JS into smaller, niche functions. For example, see my Twitch TV project. One of my functions is called isOnline(), which, you guessed it, returns true if a given streamer is online!
Secondly, onto your question: how to loop over the channels. Well, we need to know which channels we’re looping over, right? In my example, I made an array of my chosen channels (streamers). Next, I made a second array to store data for each channel (streamersData).
Now, we need to get the actual data from Twitch. As you showed in your codepen, you use an ajax call. Although I believe there is a way to make only 1 call for multiple streamers (& improve performance), we’ll use multiple calls for this example.
So, all we have to do is loop over our streamers array, sending 1 ajax for each streamer. If the ajax was successful, we’ll add the streamer data to our streamersData array as well as update the dom. You can loop over them with a for-loop, while-loop, or by making a method call itself.
Once the loop is finished, you should have a full streamersData array and a full list of streamers on your dom.
I hope I answered your question well enough! If you’re still confused, feel free to send me a message or leave a message on this forum!