JSON到HTML表的轉換

Question

我想以表格形式顯示從服務器獲取的JSON數據到HTML頁面。 我已經創建了一個js函數來做到這一點：

function saveImage(){

  var xmlhttp;
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
  }
  else {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          // Optionally, here you can update the dom to have a table in "responseDiv"
       //  document.getElementById("myDiv").innerHTML = "<pre>" + xmlhttp.responseText + "</pre>";
            var items= document.getElementById("myDiv").innerHTML;
          var test = items.xmlhttp.responseText

          $table = "<table id = 'resultTable'><td>Digits</td><td>Probability</td><tr>";

            for (var i = 0; i < test.length; i++) {

                $table += "<tr>";

                var it = test[i];

                $table += "<td>" + test[i].Digits + "</td>";

                $table += "<td>" + test[i].Probability + "</td>";


                 //alert(items[i].duration);
                $table += "</tr>";

            }

            $table += "</table>";

            $('myDiv').append($table);
            $table = "<table id = 'resultTable'><td>Digits</td><td>Probability</td><tr>";
      }
  }
  xmlhttp.open("POST", "analyzeImage", true);
  // Convert the canvas data to a data-uri encoded PNG image
  var dataURIPostBody = canvas.toDataURL("image/png");
//  window.open(dataURIPostBody, '_blank', 'location=0, menubar=0');
  xmlhttp.send(dataURIPostBody);
}

我的HTML代碼是：

<div class="col-md-3" id="myDiv">
    <h4>Confusion Matrix</h4>
    <div class="table-responsive" style="width: 250px;">
    </div>
  </div>

但是我的HTML頁面上沒有任何顯示。 任何幫助將非常感激。 謝謝。

Answer 1

所述<tr>標簽被打開外for循環和內部的for循環，和關閉一次，這是錯誤的。 看看

Answer 2

您的xmlhttp.responseText仍為文本格式，您需要使用JSON2包（例如json2.js）將其解析為json對象，因此獲取json2.js並在html代碼中引用它，然后可以調用JSON.parse（xmlhttp .respoonseText）將您的responsetext轉換為json數組。 我還更改了構造表的方式，但尚未測試您的代碼，但是我在多個地方使用了它並且可以工作。

<script type="text/javascript" src="json2.js"></script>


xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        try
        {
           var test = JSON.parse(xmlhttp.responseText);

           var table      = $("#resultTable").get(0);
          var row = table.insertRow();
          var cell1 = row.insertCell();
          var cell2 = row.insertCell();
          cell1.innerHTML = "Digits";
          cell2.innerHTML = "Probability";

            for (var i = 0; i < test.length; i++) {

                row = table.insertRow();
                cell1 = row.insertCell();
                cell2 = row.insertCell();
                cell1.innerHTML = test[i].Digits;
                cell2.innerHTML = test[i].Probability;
            }
        }
        catch(ex)
        {
          alert(ex.message+": Error parsing server response, "+xmlhttp.responseText);
        }

      }
  }

在div部分的html代碼中添加表格，以便在構建表格內容時可以在js代碼中引用該表格，

<div class="col-md-3" id="myDiv">
        <h4>Confusion Matrix</h4>
        <div class="table-responsive" style="width: 250px;">
         <table id='resultTable'>
         </table>
        </div>
      </div>