javascript - 如何将 JSON 响应附加到 HTML 网格

Question

如何将此 JSON 数据附加到例如网格布局。

我通过以下脚本提取 Google PageSpeed JSON 数据:

function clicked () {
  const url = document.getElementById('url').value;

  document.getElementById('urlerror').style.display = 'none';

  if (url.indexOf('https://') === -1) {
    document.getElementById('urlerror').style.display = 'block';
    return;
  }

  const xhr = new XMLHttpRequest();

  xhr.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={YOUR_API_KEY}`);

  xhr.onload = function () {
    document.getElementById('data').innerHTML = xhr.responseText;
  }

  xhr.send();
}

JSON 数据发送到以下 div:

<div class="pagespeed">
    <input type="text" placeholder="Enter webpage URL e.g.http://www.example.com" id="url" />
    <input type="button" id="button" value="PageSpeed Data" onclick="clicked();" />
    <div id="urlerror">Please Enter a Valid URL e.g. http://www.example.com</div>
    <pre id="data"></pre>
</div>

这是 JSON 数据。类别保持不变，但分数是动态的:

{
  "lighthouseResult": {
    "categories": {
      "performance": {
        "score": 0.99
      },
      "accessibility": {
        "score": 0.7
      },
      "best-practices": {
        "score": 0.77
      },
      "seo": {
        "score": 0.9
      },
      "pwa": {
        "score": 0.56
      }
    }
  }
}

我想查看 2 列，左侧为类别，右侧为分数。每个类别和分数在 HTML 中都有自己的 id 或类

Answer 1

也许像这样:

function renderTable (json) {
  console.log(json)
  // TODO: remove dummy data! and set data from json!
  const data = {
    "lighthouseResult": {
      "categories": {
        "performance": {
          "score": 0.99
        },
        "accessibility": {
          "score": 0.7
        },
        "best-practices": {
          "score": 0.77
        },
        "seo": {
          "score": 0.9
        },
        "pwa": {
          "score": 0.56
        }
      }
    }
  }
  
  const { categories } = data.lighthouseResult
  
  const table = document.createElement('table')
  const trHeading = document.createElement('tr')
  const thCategory = document.createElement('th')
  
  trHeading.classList = 'category-heading'
    
  thCategory.innerText = 'Category'
  thCategory.classList = 'category-key-heading'

  trHeading.appendChild(thCategory)

  const thScore = document.createElement('th')

  thScore.innerText = 'Score'
  thScore.classList = 'category-value-heading'

  trHeading.appendChild(thScore)

  table.appendChild(trHeading)
  
  Object.keys(categories).forEach(category => {
    const tr = document.createElement('tr')
    
    tr.classList = 'category category-' + category
    
    const tdKey = document.createElement('td')
    
    tdKey.innerText = category
    tdKey.classList = 'category-key category-key-' + category
    
    tr.appendChild(tdKey)

    const tdValue = document.createElement('td')
    
    tdValue.innerText = categories[category].score
    tdValue.classList = 'category-value category-value-' + category
    
    tr.appendChild(tdValue)
  
    table.appendChild(tr)
  })
  
  const out = document.getElementById("data")

  out.innerHTML = ''
  out.appendChild(table)
}

function clicked() {
  document.getElementById("urlerror").style.display = 'none';
  var url = document.getElementById("url").value;
  if (url.indexOf('https://') === -1) { document.getElementById("urlerror").style.display = 'block'; return; }
  var xhr = new XMLHttpRequest()
  xhr.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={YOUR_API_KEY}")
  xhr.onload = function () {
    // document.getElementById("data").innerHTML = xhr.responseText
    renderTable(xhr.response)
  }
  xhr.send()
}

<div class="pagespeed">
  <input type="text" placeholder="Enter webpage URL e.g.http://www.example.com" id="url" value="https://google.de" />
  <input type="button" id="button" value="PageSpeed Data" onclick="clicked();" />
  <div id="urlerror">Please Enter a Valid URL e.g. http://www.example.com</div>
  <div id="data"></div>
</div>