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.js 等 JSON 包将其解析为 json 对象，所以获取 json2.js 并在你的 html 代码中引用它，然后你就可以调用 JSON。 parse(xmlhttp.respoonseText) 将您的响应文本转换为 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);
        }

      }
  }

在 html 代码的 div 部分添加一个表格，以便在构建表格内容时在 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>