Как правильно настроить 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));