如何正确地针对JSON响应填充表

Question

我开始学习ajax，可能需要一些帮助。我正在通过API提取数据，并且在控制台中得到响应，但无法确定如何正确地针对响应，以便填充一个表。

如何将JSON响应中的分数作为目标，以便将分数放在每个类别之下？分数是动态的。

表格：

<form class="pagespeed">
  <input type="text" id="url" placeholder="Enter webpage URL" />
  <input type="button" value="Analyse Webpage" onclick="loadAnalysis()" />

  <div id="analysisTable"></div>
</form>

AJAX函数：

 function loadAnalysis() {
    var xhttp = new XMLHttpRequest();
    var url = document.getElementById("url").value;
    if (url == "") {
      alert("Please enter URL");
      return;
    }
    xhttp.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        var data = this.responseText;
        var jsonResponse = JSON.parse(data);
        console.log(jsonResponse["lighthouseResult"]);
        var table = document.createElement('table');
        table.setAttribute('class', 'result');
        var properties = ['performance', 'accessibility', 'best-practices', 'seo', 'pwa'];
        var capitalize = function(s) {
          return s.charAt(0).toUpperCase() + s.slice(1);
        }
        var tr = document.createElement('tr');
        for (var i = 0; i < properties.length; i++) {
          var th = document.createElement('th');
          th.appendChild(document.createTextNode(capitalize(properties[i])));
          tr.appendChild(th);
        }
        table.appendChild(tr);
        var tr, row;
        console.log("jsonResponse", jsonResponse);
        for (var r = 0; r < jsonResponse["lighthouseResult"].categories.length; r++) {
          tr = document.createElement('tr');
          row = jsonResponse["lighthouseResult"].categories[r];
          for (var i = 0; i < properties.length; i++) {
            var td = document.createElement('td');
            td.appendChild(document.createTextNode(row[properties[i]]));
            tr.appendChild(td);
          }
          table.appendChild(tr);
        }
        document.getElementById('analysisTable').appendChild(table);
      }
    };
    xhttp.open("GET", "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" + encodeURIComponent(url) + "&key=AIzaSyDSNxhf0capOwppqlg9wZJUvzBewxf6mHU&strategy=mobile", true);
    xhttp.send();
  }

JSON响应示例：

{"lighthouseResult":{"categories":{"performance":{"score":1.0},"accessibility":{"score":0.9},"best-practices":{"score":0.92},"seo":{"score":0.7},"pwa":{"score":0.54}}}}

示例：

​

//var data = this.responseText; //original
var data = '{"lighthouseResult":{"categories":{"performance":{"score":1.0},"accessibility":{"score":0.9},"best-practices":{"score":0.92},"seo":{"score":0.7},"pwa":{"score":0.54}}}}'

var jsonResponse = JSON.parse(data);
console.log(jsonResponse["lighthouseResult"]);
var table = document.createElement('table');
table.setAttribute('class', 'result');
var properties = ['performance', 'accessibility', 'best-practices', 'seo', 'pwa'];
var capitalize = function(s) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}
var tr = document.createElement('tr');
for (var i = 0; i < properties.length; i++) {
  var th = document.createElement('th');
  th.appendChild(document.createTextNode(capitalize(properties[i])));
  tr.appendChild(th);
}
table.appendChild(tr);
var tr, row;
console.log("jsonResponse", jsonResponse);
for (var r = 0; r < jsonResponse["lighthouseResult"].categories.length; r++) {
  tr = document.createElement('tr');
  row = jsonResponse["lighthouseResult"].categories[r];
  for (var i = 0; i < properties.length; i++) {
    var td = document.createElement('td');
    td.appendChild(document.createTextNode(row[properties[i]]));
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.getElementById('analysisTable').appendChild(table);

<div id="analysisTable"></div>

​

Answer 1

lighthouse.categories.length将为0，因为它寻址的对象不是数组。使用Object.keys对键进行迭代。

请看下面的例子。我们使用Object.keys对类别的每个条目进行迭代。然后length返回一行。

最后，我们针对属性：jsonResponse["lighthouseResult"][categories[r]];并附加score属性。

​

//var data = this.responseText; //original
var data = '{"lighthouseResult":{"categories":{"performance":{"score":1.0},"accessibility":{"score":0.9},"best-practices":{"score":0.92},"seo":{"score":0.7},"pwa":{"score":0.54}}}}'

var jsonResponse = JSON.parse(data);
console.log(jsonResponse["lighthouseResult"]);
var table = document.createElement('table');
table.setAttribute('class', 'result');
var properties = ['performance', 'accessibility', 'best-practices', 'seo', 'pwa'];
var capitalize = function(s) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}
var tr = document.createElement('tr');
for (var i = 0; i < properties.length; i++) {
  var th = document.createElement('th');
  th.appendChild(document.createTextNode(capitalize(properties[i])));
  tr.appendChild(th);
}
table.appendChild(tr);
var tr, row;
console.log("jsonResponse", jsonResponse);

var categories = Object.keys(jsonResponse["lighthouseResult"]);
for (var r = 0; r < categories.length; r++) {
  tr = document.createElement('tr');
  row = jsonResponse["lighthouseResult"][categories[r]];
  for (var i = 0; i < properties.length; i++) {
    var td = document.createElement('td');
    td.appendChild(document.createTextNode(row[properties[i]].score));
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.getElementById('analysisTable').appendChild(table);

<div id="analysisTable"></div>

​

有了Object.keys，代码就有了改进的空间。看看这个清理过的例子：

​

//ES6 example
//var data = this.responseText; //original
const data = '{"lighthouseResult":{"categories":{"performance":{"score":1.0},"accessibility":{"score":0.9},"best-practices":{"score":0.92},"seo":{"score":0.7},"pwa":{"score":0.54}}}}'

const jsonResponse = JSON.parse(data);

const table = document.createElement('table');
table.setAttribute('class', 'result');

const capitalize = function(s) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

const trHeader = document.createElement('tr');
//save the category names to an array using Object.keys
const categories = jsonResponse["lighthouseResult"].categories;
const categoriesKeys = Object.keys(jsonResponse["lighthouseResult"].categories);

//use arrays forEach functions
const trBody = document.createElement("tr");

categoriesKeys.forEach( function(item) {

  const th = document.createElement('th');
  th.appendChild(document.createTextNode(capitalize(item)));
  trHeader.appendChild(th);
  
  const td = document.createElement('td');

  td.appendChild(document.createTextNode(categories[item].score));
  trBody.appendChild(td);  
  
});

table.appendChild(trHeader);
table.appendChild(trBody);

document.getElementById('analysisTable').appendChild(table);

<div id="analysisTable"></div>

​

Answer 2

看起来，您忘记了数据的每个部分的score属性。

td.appendChild(document.createTextNode(row[properties[i]]));

应该是

td.appendChild(document.createTextNode(row[properties[i]].score));