从 API 数据创建数据表 - javascript, JQuery, ajax

Question

我正在尝试使用 javascript 中的 JQuery 从 API 创建一个表，我是这门语言的新手，我不清楚如何访问从 .ajax 查询返回的数据。

在下面的代码中，我能够获取数据并将其返回到控制台中，但是当我尝试将其设置为用于可视化的变量时，出现错误：

"<a class='gotoLine' href='#65:39'>65:39</a> Uncaught ReferenceError: data is not defined"

我是否缺少将

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">

#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);

JSFiddle - https://jsfiddle.net/jconoranderson/bgk3Lvx5/25/

Answer 1

你得到的具体错误与这一行有关：

var vaxData = document.getElementById(data);

因为scope这里没有数据变量。

您可能认为从 done 回调返回一个值会填充此变量，但它不会，因为它在不同的范围内（您可以通过在

$.ajax

调用之前声明 var 数据来修复）并且它发生在不同的时间和语境。 javascript 的执行不会等待 done 回调完成，

var vaxData = document.getElementById(data);

将在

alert("Retrieved " + data.length + " records from the dataset!");

运行之前运行。可以在MDN上找到对这类事情的更好解释。

此外，

document.getElementById()

需要一个字符串而不是像从 API 返回的数据那样的数组。

要解决此问题，您可以在调用

data

之前声明

$.ajax

变量，并在 done 回调函数中执行表的更新。在下面的示例中，我使用了一个名为

update_table

的函数来执行此操作，并且我调用了

data

vaccination_data

.

另一个问题是您的示例中表格的 HTML 未完成。

var vaccination_data = [];

$.ajax({
  url: "https://health.data.ny.gov/resource/nvtm-yit2.json",
  type: "GET",
  data: {
    "$limit" : 5000,
    "$$app_token" : 'your_app_token'
  }
}).done(function(api_data) {
  vaccination_data = api_data;
  update_table();
});

var vaxData = document.getElementById('vaxData');

const cell_keys = ['city', 'county', 'percentcompletelyimmunized'];

function create_element(tag, attributes, children = []) {
  const element = Object.assign(document.createElement(tag), attributes);
  element.append(...children);
  return element;
}

function create_row_element(item) {
  return create_element(
    'tr', {},
    cell_keys.map( (key) => create_element('td', { innerHTML: item[key] }) )
  );
}

function update_table() {
  vaxData.innerHTML = '';
  vaxData.append(...vaccination_data.map(create_row_element));
}

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