Q:

XHR Response with For-Loop not working

I have this issue with my XMLHttpRequest that I'm making. The idea is that the loop is mean to loop through a JSON array of users and also load their profile image. Loading the users works absolutely fine but when I loop to get the profile image, it shows it with the last user.
I can see where the issue lies but I don't know how to solve it. When I debug this, it does not run the xhr[i].onload part, which is important because I'm trying to append the image found to the id of the user as the loop runs. The first part of the loop will create the 'img id ="username"' for the username and then i want the XHR request to run and get the image and then append it to the 'img id' tag.
function parseJSON() {
console.log(jsonArrayOfUsers);
var htmlStart = '<ul class ="softwares">';
var htmlEnd = '</ul>'
var html = ''
var len = jsonArrayOfUsers.length;
for (var i = 0; i < len; i++) {

    var xhr = [];
    currentuser = jsonArrayOfUsers[i].username;
    currentavatar = jsonArrayOfUsers[i].avatar
    console.log(currentuser);

    html += '<li class ="softwares">' 
            + '<p><img id ="' + jsonArrayOfUsers[i].username + '" width="auto" height="100px"/></p>'
            + '<p>' + jsonArrayOfUsers[i].fullName + '</p>'
            + '<p>' + jsonArrayOfUsers[i].username + '</p>'
            + '<p>' + jsonArrayOfUsers[i].university + '</p>'
            + '<p>' + jsonArrayOfUsers[i].userType + '</p></li>';

            (function (i){
                if (jsonArrayOfUsers[i].avatar == null){}
                else{
            xhr[i] = new XMLHttpRequest();
            xhr[i].open("GET", "URL TO API" + jsonArrayOfUsers[i].avatar, true);
            xhr[i].setRequestHeader("Authorization", localStorage.token);
            xhr[i].responseType = 'blob';
            xhr[i].onload = function response(e) {
                               var urlCreator = window.URL || window.webkitURL;
                               imageUrl = urlCreator.createObjectURL(this.response);   
                               document.querySelector("#" + currentuser).src = imageUrl;
                            };
            xhr[i].send();
            }})(i);

}
var htmlFull = htmlStart + html + htmlEnd
$('.people').append(htmlFull);

A:

The way you are appending insecure text into html is bad...
I would have solved it this way using a simple forEach loop instead of a for loop
function parseJSON() {
  var list = $('<ul class="softwares">');
  var url = window.URL || window.webkitURL;

  jsonArrayOfUsers.forEach(function(user) {

    var currentuser = user.username;
    var currentavatar = user.avatar;

    console.log(currentuser);

    var img = $('<img>', {
      id: user.username,
      width: 'auto',
      height: '100px'
    })[0];

    $('<li class ="softwares">').append(
      $('<p>').append(img),
      $('<p>', {text: user.fullName}),
      $('<p>', {text: user.username}),
      $('<p>', {text: user.university}),
      $('<p>', {text: user.userType})
    ).appendTo(list)

    if (jsonArrayOfUsers[i].avatar == null) {

    } else {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "URL TO API" + user.avatar);
      xhr.setRequestHeader("Authorization", localStorage.token);
      xhr.responseType = 'blob';
      xhr.onload = function response(e) {
        img.onload = function() {
          url.revokeObjectURL(this.src);
        }
        img.src = url.createObjectURL(xhr.response);
      };
      xhr.send();
    }
  })

  $('.people').append(list);
}

