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 class="supporter__relationship">Strong relationship</i>' :
'<i class="is-d-none">Not a strong relationship</i>';
return `
<div class="supporter">
<h4 class="supporter__name">
<span class="supporter__thumbnail"><img src="${thumbnailUrl}"></span>
${name}
${relationship}
<span class="supporter__number">(${supporterNumber})</span>
</h4>
<span class="supporter__points">${ticketingPoints}</span>
</div>
`;
}
//GRAB THE ID HERE
document.querySelector("#rmFriendsAndRelativesContent").innerHTML =
`
<h5>My Friends & Family (${friendAndFamily.length} results)</h5>
${friendAndFamily.map(getFriendAndFamilyData).join("")}
<button class="btn-footer" type="button" aria-expanded="false">See more ${friendAndFamily.length}</button>
`;<div id="rmFriendsAndRelativesContent"></div>>Solution :
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 class="supporter__relationship">Strong relationship</i>' :
'<i class="is-d-none">Not a strong relationship</i>';
return `
<div class="supporter">
<h4 class="supporter__name">
<span class="supporter__thumbnail"><img src="${thumbnailUrl}"></span>
${name}
${relationship}
<span class="supporter__number">(${supporterNumber})</span>
</h4>
<span class="supporter__points">${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 class="btn-footer" 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() {
//no more chunks to get
if(currentChunkIndex === chunks.length - 1) {
return
}
//append data to HTML
document.querySelector("#data-list").innerHTML += chunks[currentChunkIndex].map(getFriendAndFamilyData);
currentChunkIndex += 1;
//Update how many more on see more button
document.querySelector("#see-more-button").innerHTML = `See more ${friendAndFamily.length - (currentChunkIndex + 1)*chunkLength}`
}<div id="rmFriendsAndRelativesContent"></div>