Load more data from json on click-CodePudding

I had another request which complicated my life even more.

I'd like to load more datas in to my html when I click my button ´See more´. Ideally I should have only 4 items displayed by default. And each load should add 2 more.

Now, what's the best approach? I'd like a hint if possible or if you could please a more detailed direction.

const friendAndFamily = [{
    name: "Serena Gosling",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Dominic Macklin",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Tom Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "George Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Leon Gosling",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Dominic Macklin",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Ollie Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Jack Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Davide Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Murilo Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  }
];


function getFriendAndFamilyData(supporter) {


  const {
    thumbnailUrl,
    name,
    isStrongRelationship,
    supporterNumber,
    ticketingPoints
  } = supporter;

  // check if the boleen above returns true or false
  const relationship = isStrongRelationship ?
    '<i >Strong relationship</i>' :
    '<i >Not a strong relationship</i>';

  return `
      <div >
      <h4 >
        <span ><img src="${thumbnailUrl}"></span>
          ${name}
          ${relationship} 
          <span >(${supporterNumber})</span>
        </h4>
        <span >${ticketingPoints}</span>
      </div>
    `;
}


//GRAB THE ID HERE
document.querySelector("#rmFriendsAndRelativesContent").innerHTML =
  `
    <h5>My Friends & Family (${friendAndFamily.length} results)</h5>
    ${friendAndFamily.map(getFriendAndFamilyData).join("")}
    <button  type="button" aria-expanded="false">See more ${friendAndFamily.length}</button>
  `;

<div id="rmFriendsAndRelativesContent"></div>

CodePudding user response：

You can try this with some explanation in code

const friendAndFamily = [{
    name: "Serena Gosling",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Dominic Macklin",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Tom Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "George Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Leon Gosling",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Dominic Macklin",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Ollie Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Jack Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Davide Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Murilo Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  }
];

//create chunks from the above dataset
function createChunksFromArray(array, length) {
  var chunks = [], i = 0, n = array.length;
  while (i < n) {
    chunks.push(array.slice(i, i  = length));
  }
  return chunks;
}

//as you said, you want to get 2 items from the list, so chunk length would be 2
const chunkLength = 2;
//the default chunk index as for getting 4 items initially
let currentChunkIndex = 1;
const chunks = createChunksFromArray(friendAndFamily, chunkLength);


function getFriendAndFamilyData(supporter) {


  const {
    thumbnailUrl,
    name,
    isStrongRelationship,
    supporterNumber,
    ticketingPoints
  } = supporter;

  // check if the boleen above returns true or false
  const relationship = isStrongRelationship ?
    '<i >Strong relationship</i>' :
    '<i >Not a strong relationship</i>';

  return `
      <div >
      <h4 >
        <span ><img src="${thumbnailUrl}"></span>
          ${name}
          ${relationship} 
          <span >(${supporterNumber})</span>
        </h4>
        <span >${ticketingPoints}</span>
      </div>
    `;
}


//GRAB THE ID HERE
document.querySelector("#rmFriendsAndRelativesContent").innerHTML =
  `
    <h5>My Friends & Family (${friendAndFamily.length} results)</h5>
    <div id="data-list">${[...chunks[0], ...chunks[1]].map(getFriendAndFamilyData).join("")}</div>
    <button  type="button" aria-expanded="false" onclick="seeMore()" id="see-more-button">See more ${friendAndFamily.length - chunkLength*(currentChunkIndex   1)}</button>
  `;
  
  //add see more event to get more items from the button click
function seeMore() {
  
  //append data to HTML
  document.querySelector("#data-list").innerHTML  = chunks[currentChunkIndex].map(getFriendAndFamilyData).join("");
  
  currentChunkIndex  = 1;

  const seeMoreButton = document.querySelector("#see-more-button");

  //no more chunks to get
  if(currentChunkIndex === chunks.length - 1) {
     seeMoreButton.parentNode.removeChild(seeMoreButton)
     return
  }
  
  //Update how many more on see more button
  seeMoreButton.innerHTML = `See more ${friendAndFamily.length - (currentChunkIndex   1)*chunkLength}`
  
}

<div id="rmFriendsAndRelativesContent"></div>