Ajax関数から変数を変更する方法は？

Question

ケース：私はバックエンドからJSONデータを受け取りました。そのデータをテーブルに表示したいと思います。私はという名前の文字列を作成しています。テーブル出力の文字列と、JSONを繰り返し処理しているときに、のtableOutputStringに応答を連結しています。最後に、innerHTMLを使用して表を表示しています。

注：「ここから開始」と「ここで終了」のコードを見てください。

問題：私はAJAXをネストしました。内部のAJAXでのtableOutputStringを連結しようとしていますが、それは起こっていません。スコープの問題があると思います。私はtableOutputStringがAJAXスコープの内部にあるときに更新されているのを見ることができますが、外側のAJAXから出ると、AJAXに入力する前の文字列と同じになります。これで私を助けてください。

function displaytable(response) { 

    // Variable to check the length of the JSON abject 
    var lengthOfJSON = Object.keys(response).length; 
    var tableOutputString = ""; 
    var Exam_id = ""; 

    // creating the body part of the table 
    tableOutputString = tableOutputString + '<tbody>'; 
    for (var i = 0; i < lengthOfJSON; i++) { 
     tableOutputString = tableOutputString + '<td>' + (i + 1) + '</td>'; 

     for (var key in response[i]) { 
      if (key == "exam_name") { 
       Exam_id = response[i]["exam_id"]; 
       tableOutputString = tableOutputString + '<td>' + '<a href="#"' + "onclick=getExam(" + Exam_id + ")>" + response[i][key] + '</a>' + '</td>'; 
      } else { 
       tableOutputString = tableOutputString + '<td>' + response[i][key] + '</td>'; 
      } 
     } 


     /* Starts Here */ 

     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       var response = JSON.parse(this.responseText); 

       if (response["taken"] == "true") { 
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function() { 
         if (this.readyState == 4 && this.status == 200) { 
          var response = JSON.parse(this.responseText); 
          if (response["graded"] == "true") { 
           tableOutputString = tableOutputString + '<td>' + "graded" + '</td>'; // trying to concatenate 
          } 
          else { 
           tableOutputString = tableOutputString + '<td>' + "Not graded" + '</td>'; // trying to concatenate 
          } 
         } 
        }; 
        xhttp.open("POST", "getWasUserExamGraded.php?id=" + Exam_id, true); 
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
        xhttp.send(); 
       } 
       else { 
        tableOutputString = tableOutputString + '<td>' + "Not taken" + '</td>'; // trying to concatenate 
       } 
      } 
     }; 
     /* Ends Here */ 


     xhttp.open("POST", "getDidTakeExam.php?id=" + Exam_id, true); 
     xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     xhttp.send(); 
     tableOutputString = tableOutputString + '</tbody>'; //tableOutputString is not updated inside AJAX 

     document.getElementById("responstable").innerHTML = tableOutputString; 
    } 
} 

Answer 1

私は問題はあなたがテーブルを更新する時間だと思う、あなたはどの ``要素を作成していないonreadystatechange

var cellText; 
if (response["graded"] == "true") { 
    cellText = '<td id="gradedCell">' + "graded" + '</td>'; 
} else { 
    cellText = '<td id="gradedCell">' + "Not graded" + '</td>'; 
} 
document.getElementById("gradedCell").innerHTML = cellText ;