使用jQuery Ajax获取API数据后无法外部访问，如何生成表格？

我是JavaScript新手，尝试用jQuery的Ajax从API获取数据来生成表格。目前能在控制台打印获取到的数据，但尝试将数据赋值给外部变量以用于可视化时，出现错误：Uncaught ReferenceError: data is not defined。请问需要补充什么步骤，才能在Ajax请求外部访问data变量？

我的代码 #

HTML代码 #

<script src="script.js"></script>

<table>
  <thead>
    <tr>
      <th>City</th>
      <th>County</th>
      <th>Percent Immunized</th>
    </tr>
  </thead>
  <tbody id="vaxData">
</table>

JS代码 #

$.ajax({
    url: "https://health.data.ny.gov/resource/nvtm-yit2.json",
    type: "GET",
    data: {
      "$limit" : 5000,
      "$$app_token" : "aGFbKDOg0gCeCm2c9Od2EsFjL"
    }
}).done(function(data) {
  alert("Retrieved " + data.length + " records from the dataset!");
  console.log(data);
  
  return data
});

var vaxData = document.getElementById(data);

解决方法 #

核心问题 #

Ajax是异步操作——你的代码里var vaxData = document.getElementById(data);会在Ajax请求还没拿到数据、data变量还没生成的时候就执行，而且data是done回调的局部变量，外部根本访问不到。另外这里document.getElementById(data)也写错了，应该传id字符串"vaxData"，不是data变量。

正确写法：把数据处理逻辑放在回调内部 #

所有需要用到data的操作，必须放在done回调函数里，因为只有请求完成后，data才会有有效值：

$.ajax({
    url: "https://health.data.ny.gov/resource/nvtm-yit2.json",
    type: "GET",
    data: {
      "$limit" : 5000,
      "$$app_token" : "aGFbKDOg0gCeCm2c9Od2EsFjL"
    }
}).done(function(data) {
  alert("Retrieved " + data.length + " records from the dataset!");
  console.log(data);
  
  // 在这里生成表格
  const tbody = document.getElementById("vaxData");
  data.forEach(item => {
    const row = document.createElement("tr");
    // 字段名根据API返回的实际字段调整，这里是示例
    row.innerHTML = `
      <td>${item.city || '-'}</td>
      <td>${item.county || '-'}</td>
      <td>${item.percent_immunized || '-'}</td>
    `;
    tbody.appendChild(row);
  });
});

可选：用全局变量+处理函数（需注意异步顺序） #

如果非要把数据存到外部变量，先声明全局变量，然后在回调里赋值后调用处理函数——绝对不能在Ajax外面直接用这个变量，必须等请求完成：

// 声明全局变量
let globalVaxData;

$.ajax({
    // 同上配置
}).done(function(data) {
  globalVaxData = data;
  // 赋值后立即调用处理函数
  renderVaxTable(globalVaxData);
});

// 单独写表格渲染函数
function renderVaxTable(data) {
  const tbody = document.getElementById("vaxData");
  data.forEach(item => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${item.city || '-'}</td>
      <td>${item.county || '-'}</td>
      <td>${item.percent_immunized || '-'}</td>
    `;
    tbody.appendChild(row);
  });
}

更现代的写法：async/await #

用async/await可以把异步代码写成同步风格，更易读：

async function fetchAndRenderData() {
  try {
    // 等待Ajax请求完成拿到数据
    const data = await $.ajax({
      url: "https://health.data.ny.gov/resource/nvtm-yit2.json",
      type: "GET",
      data: {
        "$limit" : 5000,
        "$$app_token" : "aGFbKDOg0gCeCm2c9Od2EsFjL"
      }
    });
    
    alert("Retrieved " + data.length + " records from the dataset!");
    console.log(data);
    // 渲染表格
    renderVaxTable(data);
  } catch (error) {
    console.error("数据请求失败：", error);
  }
}

function renderVaxTable(data) {
  const tbody = document.getElementById("vaxData");
  data.forEach(item => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${item.city || '-'}</td>
      <td>${item.county || '-'}</td>
      <td>${item.percent_immunized || '-'}</td>
    `;
    tbody.appendChild(row);
  });
}

// 调用函数启动流程
fetchAndRenderData();

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