如何将FAA NOTAM API返回的JSON数据整合到HTML代码中？

你当前的代码仅打印了API返回的文本数据，未完成JSON解析与HTML渲染的步骤。以下是修改后的完整实现：

修改后的JavaScript代码 #

var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
  try {
    // 把API返回的文本解析为JSON对象
    var notamsData = JSON.parse(e.target.responseText);
    
    // 获取要插入内容的DOM元素
    var container = document.getElementById('input');
    if (!container) return;

    // 生成HTML内容（需根据API实际返回的JSON结构调整字段）
    var htmlContent = '';
    if (notamsData.notams && Array.isArray(notamsData.notams)) {
      notamsData.notams.forEach(function(notam) {
        htmlContent += `
          <div class="notam-item">
            <h3>NOTAM编号: ${notam.id}</h3>
            <p><strong>机场ICAO码:</strong> ${notam.icaoLocation}</p>
            <p><strong>通知内容:</strong> ${notam.notamText}</p>
            <hr>
          </div>
        `;
      });
    } else {
      htmlContent = '<p>未获取到有效NOTAM数据</p>';
    }

    // 将生成的HTML插入到指定元素中
    container.innerHTML = htmlContent;
  } catch (err) {
    console.error('数据解析失败:', err);
    document.getElementById('input')?.innerHTML = '<p>数据加载失败，请检查请求或API返回格式</p>';
  }
});
xhr.addEventListener('error', function(e) {
  console.error('请求错误，状态码:', e.target.status);
  document.getElementById('input')?.innerHTML = `<p>请求错误，状态码: ${e.target.status}</p>`;
});
xhr.open('GET', 'https://external-api.faa.gov/notamapi/v1/notams?icaoLocation=ELLX');
xhr.setRequestHeader('client_id','你的client_id'); // 填入你的密钥
xhr.setRequestHeader('client_secret','你的client_secret'); // 填入你的密钥
xhr.send();

对应的HTML结构 #

<div id="input"></div>

关键说明 #

• JSON解析: 用JSON.parse()把API返回的文本转成JavaScript对象，才能访问内部字段。
• DOM操作: 通过document.getElementById('input')定位目标元素，用innerHTML插入生成的HTML。
• 数据渲染: 遍历NOTAM数组，为每条数据生成对应的HTML结构，可根据需求调整展示的字段（比如编号、机场码、通知内容等）。
• 错误处理: 增加try-catch处理JSON解析失败的情况，请求出错时给用户直观提示。

注意：需对照API实际返回的JSON结构调整字段名，可先在控制台打印notamsData查看具体结构。

内容的提问来源于stack exchange，提问作者Ted