Loop frustration in Twitch Api challenge

Ok I’m at wit’s end. My for loop just to display the channel names that I already declared in an array won’t print to my screen. This isn’t even an Api issue (I think). Can someone show me where my code is wrong? Thanks. To be clear all I want is for the usernames in the array I’ve written at the top become part of my html inside an h2 tag. The data is logged to the console so the api call is working as it should. I just don’t know what’s wrong.

Codepen link: https://codepen.io/DebugAyem/pen/qXVvbW

function main() {

var users = [‘ESL_SC2’, “OgamingSC2”, “cretetion”, “freecodecamp”,];
var i;
var twitchProperties;
var status;
var name;

for(i=0;i<users.length;i++){
var userNames = users[i];
var twitchURL = “https://wind-bow.glitch.me/twitch-api/streams/” + userNames +"?callback=?";

$.getJSON(twitchURL,function(data) {

console.log(data);

$('.user'+i).html('<h2>'+userNames+'</h2>');

});

}

}

That works perfectly! Can you explain more about the differences between .forEach() and for() and if there any other situations where .forEach would be more useful. Also where does the asynchronous request come in and why does it prevent for from happening. Cheers!

Thanks for all the help guys. I’ll read up on the subject!!