如何在使用append时正确定位JSON响应

Question

当目标为JSON响应时，我似乎无法获得正确的语法。在我的项目中，我有一个<div id="percentage"></div>。我想将分数作为文本附加到div，但在控制台中收到"Cannot read property 'categories‘of undefined“错误。我认为这是我这边的语法错误。如何修复它？

JSON：

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

Javascript：

  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);
        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.classList.add("category");
          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]];
            var ids = 'performance,accessibility,best-practices,seo,pwa'.split(',');
        for (var i = 0; i < properties.length; i++) {
        var td = document.createElement('td');
          td.id = ids[i];
            td.className = "score";                     
          td.appendChild(document.createTextNode(row[properties[i]].score));


                var seldiv = document.getElementById("percentage");
                     seldiv.append(data.lighthouseResult.categories.performance.score);


          tr.appendChild(td);
          }
          table.appendChild(tr);
        }
        document.getElementById('analysisTable').appendChild(table);
      }
    };
    xhttp.open("GET", "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" + encodeURIComponent(url) +
      "&fields=lighthouseResult%2Fcategories%2F*%2Fscore&prettyPrint=false&strategy=desktop&category=performance&category=pwa&category=best-practices&category=accessibility&category=seo&key=AIzaSyDSNxhf0capOwppqlg9wZJUvzBewxf6mHU", true);
    xhttp.send();
  }

我正在纠结的部分：

var seldiv = document.getElementById("percentage");
seldiv.append(data.lighthouseResult.categories.performance.score);

Answer 1

我觉得你在找jsonResponse.lighthouseResult.categories.performance.score您执行var jsonResponse = JSON.parse(data);，这样data实质上就是文本，而该文本的JSON表示形式是jsonResponse