Question

我想将我的JSON文档整齐地格式化为HTML页面。我的Javascript代码是：

 xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          // Optionally, here you can update the dom to have a table in "responseDiv"
        //  var html = ''
          var text = xmlhttp.responseText;
          var newStr = text.substring(1, text .length-1);

          document.getElementById("myDiv").innerHTML = "<pre> <code>" + newStr + "</code> </pre>";

      }
  }

我的HTML代码如下：

<table class="table">
  <thead>
    <tr>
     <th>Digits</th>
     <th>Probability</th>
   </tr>
  </thead>
  <tbody>
  </tbody>
  <div id="myDiv"></div>
  </div></div>

JSON数组：

{0: 0.99, 1: 0.8, 2: 0.6, 3: 0.4, 4: 0.2, 5: 0, 6: 0.12, 7: 0.09, 8: 0.001, 9: 0.0025}

我能够从JSON代码中删除“{}”，但我希望以整齐的格式显示键值，我不知道如何。请帮忙。感谢。

Answer 1

这不是使用JSON的方式。您需要将JSON解析为变量并将其用作对象。

var obj = JSON.parse(text);

alert(obj.YourKeyOfJSONArrayHere);

Answer 2

您可以使用JSON.stringify功能，该功能允许格式化选项。在你的情况下你可以像这样使用它：

// Mock xmlhttp.responseText 
var xmlhttp = {responseText: '{"0":0.99,"1":0.8,"2":0.6,"3":0.4,"4":0.2,"5":0,"6":0.12,"7":0.09,"8":0.001,"9":0.0025}'};

// Your code
var text = xmlhttp.responseText;

var newStr = JSON.stringify(JSON.parse(text), null, 4);
document.getElementById("myDiv").innerHTML = "<pre> <code>" + newStr + "</code> </pre>";

<div id="myDiv"></div>

Answer 3

修改：您可以查看下面的代码，该代码现在为对象中的每个键值对创建一个表行和两个列元素，并将其innerHTML分配给键和价值分别。然后，它将列附加到行，并将行附加到文档中存在的tbody元素。（在将新创建的元素附加到文档中已存在的内容之前，您将看不到它。）

-

通过AJAX接收JSON数据后，您应该在其上使用JSON.parse，这会将其转换为对象，以便您可以在其上运行for...in循环并访问其键和值

所以你的代码看起来像：

  //ajax call etc

  xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

      var obj = JSON.parse(xmlhttp.responseText);

      //find the tbody element on the table element with class "table":
      var tbody = document.querySelector('table.table tbody'); 

      for(var objKey in obj){ // this will loop through all the keys in the object

           //create a table row element and two column elements:
           var row = document.createElement('tr'),
               td1 = document.createElement('td'),
               td2 = document.createElement('td');

           //assign object key to first column and value to second column:
           td1.innerHTML = objKey;
           td2.innerHTML = obj[objKey];

           //append the columns to the row, and the row to the tbody element:
           row.appendChild(td1).appendChild(td2);
           tbody.appendChild(row);          

      }
  }

如何在HTML中格式化JSON键值

3 个答案: