Forループが動作しないXHR応答

Question

私が作成している私のXMLHttpRequestにこの問題があります。アイデアは、ループはJSONユーザーの配列をループし、そのプロファイルイメージを読み込むことを意味します。ユーザーを読み込むことは大丈夫ですが、プロファイル画像を取得するためにループすると、最後のユーザーに表示されます。

問題がどこにあるのかはわかりますが、解決方法はわかりません。これをデバッグすると、xhr [i] .onload部分は実行されません。これは、ループの実行中にユーザーのIDに見つかったイメージを追加しようとしているため重要です。ループの最初の部分は、ユーザー名の 'img id = "username"を作成し、XHRリクエストを実行してイメージを取得し、それを' img id 'タグに追加します。

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); 

Answer 1

あなたがHTMLに安全でないテキストを追加する方法が悪いです...

私が代わりにforループ

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); 
}