Javascript 使用JQuery从API获取和显示数据

所以伙计们，我需要得到这个API数据：并把它放在一个HTML文件中

下面是我正在编写的JavaScript代码：

     async function getData() 
  {
    //await the response of the fetch call
    let response = await fetch('https://api.github.com');
    //proceed once the first promise is resolved.
    let data = await response.json()
    //proceed only when the second promise is resolved
    let newData = data.results;
    return newData;
  }
//call getData function
getData()
.then(function(result){
    $.each(result, (index, user) => {
      $('#character').append(`
        <div class='card'>
          <img
            src=${user.image}
            alt=''
            class='round-img'
          />
          <h4 class='card-name'>${user.name}</h4>
          <input id="collapsible" class="toggle" type="checkbox">
            <label for="collapsible" class="lbl-toggle">
              <i class='fas fa-chevron-down'> </i>
            </label>
          </input>
        </div>
      `)
    });
})

异步函数getData（） { //等待fetch调用的响应 let response=等待取数（'https://api.github.com'); //一旦第一个承诺得到解决，就继续进行。 let data=wait response.json（） //仅当第二个承诺得到解决时才继续 让newData=data.results； 返回新数据； } //调用getData函数 getData（） .然后（函数（结果）{ $.each（结果，（索引，用户）=>{ $（'#字符'）。追加(` ${user.name} `) }); })

---

因此，我正在获取用户信息，但我需要将其显示在一个列表中，每个页面的用户数量有限。我该怎么做

如果您可以使用外部库，那么Data Table是一个很好的库，它将为您提供搜索、筛选、排序和分页功能。您只需要创建表并将该表的id传递给数据表库。它会满足你的要求。您可以设置每页的最大项目数

而不是.each（），使用for循环循环“result”

var i;
for(i=0;i<(offset+(page*8)+1);i++){
  //use result[i] in your html
}

vari；
对于（i=0；i查看您提供的

API将自动为响应分页。每页最多可收到20个文档

响应上的
info
字段将为您提供有关数据集的一些有用信息，包括有多少页、下一页和文档数

info: {
  count: 493,
  pages: 25,
  next: "https://rickandmortyapi.com/api/character/?page=2",
  prev: ""
}