Получать и отображать данные из API с помощью JQuery

Question

Итак, ребята, мне нужно получить эти данные API: https://api.github.com и поместить их в файл 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>
      `)
    });
})

Итак, я получаю информацию о пользователях, но мне нужно отображать ее в списке с ограниченным количеством пользователей встр. Как я могу это сделать?

Answer 1

вместо .each (), цикл 'result' с циклом for.

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

смещение, если количество записей на странице (поэтому 0 для первой страницы) равно номеру страницы (поэтому 1за первую страницу)

Answer 2

Просмотр предоставленной вами документации .

API автоматически разбивает ответы на страницы. Вы получите до 20 документов на страницу.

Поле info в ответе даст вам некоторую полезную информацию о наборе данных, включая количество страниц, следующую страницу и количестводокументов.

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

Answer 3

Если вы можете использовать внешнюю библиотеку, то Data Table - это хорошая библиотека, которая даст вам возможность поиска, фильтрации, сортировки и разбивки на страницы. Вам просто нужно создать таблицу и передать идентификатор этой таблицы в библиотеку таблиц данных. Он позаботится о ваших требованиях. Вы можете установить максимальное количество элементов на странице.

https://datatables.net/examples/basic_init/zero_configuration.html