javascript - 从 url 请求 JSON 数据并插入到 html 表中

Question

我正在尝试编写从 URL 接收 JSON 数据并将其插入 html 表的代码。我只能更改“processResponse”函数中的内容。目前它在每个表中都说未定义。代码笔链接：

https://codepen.io/mauro-scheltens/pen/OJWQwXY

这是我的代码：

const requestUrl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

function requestJSON(url) {
  let request = new XMLHttpRequest();
  request.open('GET', url);
  request.send();
  request.onload = function() {
    let response = request.response;
    processResponse(response);
  }
}

function sendRequest() {
  requestJSON(requestUrl);
}

function processResponse(response) {
  document.querySelector("#squadName").innerHTML = response.squadName;
  document.querySelector("#homeTown").innerHTML = response.homeTown;
  document.querySelector("#formed").innerHTML = response.formed;
  document.querySelector("#secretBase").innerHTML = response.secretBase;
  document.querySelector("#active").innerHTML = response.active;
}

sendRequest();

td {
  border: 2px solid black;
  border-spacing: 0;
}

<h1>Requesting data and inserting</h1>

<table id='overview-table'>
  <tr>
    <th>squadName</th>
    <th>homeTown</th>
    <th>formed</th>
    <th>secretBase</th>
    <th>active</th>
  </tr>
  <tr>
    <td id='squadName'></td>
    <td id='homeTown'></td>
    <td id='formed'></td>
    <td id='secretBase'></td>
    <td id='active'></td>
  </tr>
</table>

这就是它的样子：

有人可以帮我弄这个吗？

标签： javascripthtmljson

Answer 1

request.response是一个字符串，而不是 JSON 对象。因此，您必须在处理之前将其解析为 JSON。

function requestJSON(url) {
    ...
    processResponse(JSON.parse(response));
}