如何将来自 API 的 JSON 数据集成到 html 代码中？

Question

（菜鸟问题），但我在使用 JSON 数据时遇到了一些困难，我从 FAA NOTAM API 接收并通过 id 或类将其转换为 html 代码。

（我故意把钥匙藏起来了）

var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
  var response = e.target.responseText;
  console.log(response);
});
xhr.addEventListener('error', function(e) {
  console.error('Request error with status', e.target.status);
});
xhr.open('GET', 'https://external-api.faa.gov/notamapi/v1/notams?icaoLocation=ELLX');
xhr.setRequestHeader('client_id','');
xhr.setRequestHeader('client_secret','');
xhr.send();

<a id="input"></a>

Answer 1

我不推荐在 js (XMLHTTPRequest) 中使用老式的异步处理方式，但是在从 api 获取响应时以任何方式在 js 中处理异步，你应该将 json 响应解析为 DOM。您可以在 how-to-call-for-json-output-from-an-api-into-html 中找到有关执行此操作步骤的答案。（链接的帖子使用 fetch api 来处理 js 中的异步）

另外，如果您不熟悉异步 js，how-do-i-return-the-response-from-an-asynchronous-call 这篇文章对处理异步 js 有很好的解释。