如何在线调用json api数据javascript？

我想创建一个表和搜索过滤器，数据取自这里

---

. 有人能举例说明如何通过json api检索数据以及如何创建筛选搜索吗？

您可以使用

Datatables

库和

Ajax源数据

或

服务器端处理

进行需求创建表和搜索，从api筛选数据

有一些带有示例javascript代码的参考链接

更新：

我为Datatables添加了带有脚本和HTML的演示。您可以在返回的对象

dataSrc:'results'

$('#example').DataTable({
    ajax: {
        url: 'https://swapi.co/api/planets/?format=json',
        dataSrc: 'results'
    },
    columns: [
      { data: "name" }, 
      { data: "climate" }, 
      { data: "diameter" },
      { data: "gravity" },
      {data: "orbital_period"},
      {data: "population"}
    ]
})

$（'#示例'）。数据表({
阿贾克斯：{
网址：'https://swapi.co/api/planets/?format=json',
dataSrc:“结果”
},
栏目：[
{数据：“名称”}，
{数据：“气候”}，
{数据：“直径”}，
{数据：“重力”}，
{数据：“轨道周期”}，
{数据：“人口”}
]
})

名称
气候
直径
重力
轨道周期
人口
名称
气候
直径
重力
轨道周期
人口

引导jQuery示例将有助于过滤

为了访问API，您需要创建一个AJAX（XHR、Http请求程序等）调用来检索数据。如果使用jQuery，这非常简单：

$.ajax({
  dataType: 'json', // Expecting JSON
  url: 'https://swapi.co/api/planets/?format=json', // Data endpoint
  cache: true, // Cache the request for testing purposes
  success: function(data) {
    populateTable(data.results); // On success, access the data
  }
});

至于填充表，您需要从结果中的一个数据项中获取字段并对其进行排序。您也可以忽略一些字段，如下所示

$('#myTable')
  .append($('<thead>')
    .append($('<tr>')
      .append(fields.map(field => $('<th>').addClass('text-center').text(field)))))
  .append($('<tbody>')
    .append(data.map(result => $('<tr>')
      .append(fields.map(field => $('<td>').text(result[field]))))));

演示

让ignoreFields=[“已创建”、“已编辑”、“电影”、“居民”、“url”]，
sortField='name'；
$（函数（）{
$（'.loading mask'）.show（）；//请求前显示掩码
$.ajax({
数据类型：“json”，
网址：'https://swapi.co/api/planets/?format=json',
是的，
成功：功能（数据）{
可推广（数据、结果）；
$（'.loading mask'）.hide（）；//在响应后隐藏掩码
},
故障：功能（数据）{
$（'.loading mask'）.hide（）；//在响应后隐藏掩码
}
});
$（'#myInput'）。on（'keyup'，onFilter）；
});
函数populateTable（数据）{
数据排序（（a，b）=>{
返回a[sortField].toLowerCase（）.localeCompare（b[sortField].toLowerCase（））；
});
变量字段=对象。键（数据[0]）。排序（（a，b）=>{
如果（a==sortField）返回-1；
如果（b==sortField）返回1；
返回a.toLowerCase（）.localeCompare（b.toLowerCase（））；
}).filter（x=>ignoreFields.indexOf（x）=-1）；
$（“#我的表格”）
.append（$（''）
.append（$（''）
.append（fields.map（field=>$（''）.addClass（'text-center'））.text（field '）））
.append（$（''）
.append（data.map）（结果=>$（“”）
.append（fields.map（field=>$（''）.text（result[field]俬俬俬俬）；
}
过滤器上的函数（e）{
let value=$（this.val（）.toLowerCase（）；
$（'#myTable tbody tr'）.filter（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）>-1）；
});
}

。可加载{
位置：相对位置；
宽度：100%；
高度：300px；
溢出：滚动；
}
.loadable>.loading掩码，
.loadable>表格{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：300px；/*与其父级相同*/
}
.装载面罩{
显示：无；/*默认情况下隐藏*/
背景色：rgba（0,0,0,0.5）；
背景图像：url（'https://i.imgur.com/lW8P6HP.gif');
背景重复：无重复；
背景位置：中心；
z指数：1000；
}
#我的输入{
边缘底部：0.667em；
}

可过滤表
在输入字段中键入一些内容以在表中搜索名字、姓氏或电子邮件：

注意，我们在tbody中开始搜索，以防止筛选表头

你的问题是什么？如何使用Fetch API？是Fetch API如何使用如何检索此数据我方无法访问您的链接，您需要确保它返回JSON OBJECT更新的演示使用datatablesThnk您兄弟如何添加加载，当数据正在加载时retrieved@putrairawan添加了加载掩码，这是一个简单的概念。你所要做的就是在请求发出前显示它，在收到响应后隐藏它。如何？我问哥哥，因为我刚刚学会了很多，非常感谢brother@putrairawan实际上我把

搞砸了，我忘了给它赋值

。我更新了响应，例如，

$（“#myTable tbody tr”）。过滤器