lighthouse.categories.length will result in 0 since it is referencing an object rather than an array.
To iterate over the keys, you should use Object.keys.
Take a look at the example provided below where we utilize Object.keys to loop through each category entry and extract the row count using length.
Last but not least, we focus on the property:
jsonResponse["lighthouseResult"][categories[r]];
and then add the
score attribute.
//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>
By utilizing Object.keys, there exists potential for enhancing the code structure. Observe this refined version:
//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>