Storing a max of 6 cards per page-CodePudding

I am making a pokedex API. I am now able to load all the cards by name or type. But the code loads in all the cards at one page. I would like to store the cards with a max of 6 and then they continue on a new page. But I can't find how to do this so if anyone has an idea let me know!

JS:

$(document).ready(function (e) {

$("#TheSubmitButton").on("click", function(event){

  $("#card-container").empty();
  event.preventDefault();
  var pokemon = $("#searchInput").val().trim();

  $.ajax({
    method: "GET",
    url: "https://api.pokemontcg.io/v2/cards?q=name:"   pokemon

  }).then(function(response){
    for (var i = 0; i < response.data.length; i  ) {

      var pokeTainer = $("<div class='poketainer'></div>");

      var pokemonName = $("<div></div>");
      pokemonName.text(response.data[i].name);
      pokeTainer.append(pokemonName);

      var pokemonCard = $("<img class='pkmn-card'>");
      pokemonCard.attr("src", response.data[i].images.small);
      pokeTainer.append(pokemonCard);
                  
      var pokemonEvolve = $("<div></div>");
      pokemonEvolve.text('Evolves to: '   response.data[i].evolvesTo);
      pokeTainer.append(pokemonEvolve);
                  
      var pokemonFlavor = $("<div></div>");
      pokemonFlavor.text(response.data[i].flavorText);
      pokeTainer.append(pokemonFlavor);

      var pokemonTypes = $("<div></div>");
      pokemonTypes.text(response.data[i].types);
      pokeTainer.append(pokemonTypes);
                  
      $("#card-container").append(pokeTainer);
        
    }
  });

});

CodePudding user response：

Change your API url to this:

url: "https://api.pokemontcg.io/v2/cards?q=name:"   pokemon   "&page="   pageNumber   "&pageSize=6"

Source: Documentation

CodePudding user response：

Store your API data to LocalStorage and pull data to show in UI when user scroll it.

OR Store Array of objects with pages. ex:

[
   {
     page: 1,
     data: [ 6 records here.]
   },
   {
     page: 2,
     data: [ 6 records here.]
   }
]

and then show on UI when user scrolls it.

ie - separate the html creation as different function.