从 API 数据创建数据表 - javascript、JQuery、ajax-解网

问：

我正在尝试使用 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/

JavaScript jQuery AJAX API 变量

在“完成（回调）”中，您正在接收数据，但您没有将其存储在任何地方。您可以处理数据，然后将其呈现给视图（如@rajatJha所示），或者将其存储在回调范围之外的变量中，以便以后可以访问它。另外，getElementById 接受一个字符串，而不是一组数据。

0赞 John Conor 4/15/2023

这就是我想知道的，是如何存储它。

0赞 Rajat Jha 4/15/2023

保存任何数据库

0赞 John Conor 4/15/2023

不过，我在该示例中遇到的问题是它正在使用新声明的变量来创建“数据”。我试图理解的是如何获取从 fetch 命令返回的数据并将其放入可在脚本中其他位置使用的变量中。

答：

2赞 Ben Stephens 4/15/2023 #1

您收到的特定错误与以下行有关：

var vaxData = document.getElementById(data);

因为这里没有数据变量。

您可能认为从完成的回调返回值会填充此变量，但事实并非如此，因为它位于不同的作用域中（您可以通过在调用前声明 var 数据来修复），并且它发生在不同的时间和上下文中。javascript 的执行不会等待完成的回调完成，而是在运行之前运行。对于这种事情，可以在 MDN 上找到更好的解释。$.ajaxvar vaxData = document.getElementById(data);alert("Retrieved " + data.length + " records from the dataset!");

此外，期望字符串而不是数组，就像从 API 返回的数据一样。document.getElementById()

若要解决此问题，可以在调用之前声明变量，并在 done 回调函数中执行表的更新。在下面的示例中，我使用了调用的 a 函数来执行此操作，并且调用了 .data$.ajaxupdate_tabledatavaccination_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>

编辑添加，此行：还使用称为闭包的东西来工作，以便完成的回调函数具有对变量的引用。vaccination_data = api_data;vaccination_data

这很有帮助，谢谢！感谢您的详细回复。虽然当我尝试在 jsfiddle 中运行它时，我现在收到错误：.我正在尝试在我最终接受之前进行调试，我仍在学习如何识别.js错误。我习惯了 python，它识别确切的行......"<a class='gotoLine' href='#52:1'>52:1</a> Uncaught ReferenceError: $ is not defined"

0赞 Ben Stephens 4/15/2023

您是否将jQuery包含在新小提琴中？

0赞 John Conor 4/15/2023

啊，没关系！我是在纯javascript中运行它。非常感谢您的帮助和耐心。我对javascript很陌生。

0赞 John Conor 4/15/2023

斯蒂芬斯@Ben还有一个问题。如果我想将表中的数据作为对象访问。我该怎么做？例如，vaxData 函数返回的信息不仅仅是包含数据的 json 对象......

0赞 Ben Stephens 4/15/2023

@JohnConor 我认为我不明白这个问题。是一个变量，包含对 HTMLElement 对象的引用。“如果我想将表中的数据作为对象访问”是指从 API 中检索到的数据还是表单元格的内容（或其他内容）？vaxData

上一个：将从 api 返回的数据分配给变量 + javascript [duplicate]

下一个：如何使用变量作为实例名称的一部分 [duplicate]

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

Create data table from API data - javascript, JQuery, ajax

评论

评论