it has to do with asynchronous calculation working better with recursion
Not exactly. The issue has to do with scope.
You reference xmlhttp inside your callback function (onreadystatechange), but then overwrite xmlhttp with your loop before the callback can fire. Therefore you’re always checking against the last channel in the array.
By making it recursive you introduce a closure which isolates the scope and prevents the reference to xmlhttp from being overwritten. Alternatively, you can just change references from xmlhttp to this and it’ll also work.
var channels = ['maddenamy', 'other_channel', 'etc'];
for(i = 0;i < channels.length;++i){
var xmlhttp = new XMLHttpRequest(),
url = 'https://api.twitch.tv/kraken/channels/'+channels[i];
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
document.getElementById('names').innerHTML += myArr.display_name; // it loads the channels like jquery .append function
}
}
xmlhttp.open('GET', url, true);
xmlhttp.send();
}