I'm currently engaged in a project that involves fetching product information from a JSON file and displaying it on an HTML page using JavaScript. While I've successfully implemented the fetch function, I now want to add a "Load More" function/button. The goal is to initially show 12 items (in a 4x3 grid) on the page and then load an additional 12 items when the user clicks the button. Any assistance with this task would be greatly appreciated. Currently, the code displays all data from the JSON file, but I wish to modify it to only display the first 12 items and load more upon user interaction. The code snippet below represents a section of the JSON file.
`{ "productList": [
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1454160_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_6_medium.jpg"
],
"name": "Fringed checked wool-blend coat",
"designer": "Marni",
"url": "/products/Marni-Fringed-checked-wool-blend-coat-1454160",
"price": "£1,790",
"index": 0,
"code": "1454160"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1454112_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_6_medium.jpg"
],
"name": "Shopping logo-jacquard tote bag & leather pouch",
"designer": "Marni",
"url": "/products/Marni-Shopping-logo-jacquard-tote-bag-%26-leather-pouch-1454112",
"price": "£890",
"index": 1,
"code": "1454112"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1454159_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_6_medium.jpg"
],
"name": "Suede and silk-knit midi skirt",
"designer": "Marni",
"url": "/products/Marni-Suede-and-silk-knit-midi-skirt-1454159",
"price": "£1,690",
"index": 2,
"code": "1454159"
},
fetch("products/products.json")
.then((response) => response.json())
.then((data) => {
console.log(data);
for (var i = 0; i < data.productList.length; i++) {
console.log(data.productList[i].images);
products =
products +
`
<div class=card>
<img src="${data.productList[i].images[2]}">
<h4>${data.productList[i].designer}</h4>
<p>${data.productList[i].name}</p>
<p>${data.productList[i].price}</p>
</div>
`;
}
document.querySelector("#myData").innerHTML = products;
}
);html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
font-size: 100%;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* FONT & TYPOGRAPHY STYLES */
p,
h1,
h2,
h3,
h4,
body,
html,
label {
font-family: "Lato", Helvetica, sans-serif;
color: #333447;
line-height: 1;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.375rem;
}
h4 {
font-size: 1.125rem;
}
p {
font-size: 1.125rem;
font-weight: 300;
}
strong {
font-weight: 700;
}
/* button */
.btncontainer {
display: flex;
justify-content: center;
}
button {
background-color: #000; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
font-family: "Lato", Helvetica, sans-serif;
}
button:hover {
background-color: #fff;
color: #000;
border: #000 solid 1px;
}
/* CLASSES */
.product-img {
max-width: 90%;
}
/* GRID SYSTEM */
.container {
margin-bottom: 2rem;
margin-top: 2rem;
}
.row {
display: flex;
justify-content: space-between;
text-align: center;
}
#myData {
display: grid;
grid-gap: 20px;
padding: 20px;
}
@media (min-width: 768px) {
#myData {
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 960px) {
#myData {
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
#myData {
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
}
}<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Product List Front End Test</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="#" />
</head>
<body>
<main class="container">
<section class="row">
<div clas="col-6">
<h1>Product List Page Test by ______</h1>
</div>
</section>
<section class="row" id="productList">
<div id="myData"></div>
</section>
<div class="btncontainer">
<button id="lmbutton">Load more</button>
</div>
</main>
<script src="js/main.js"></script>
</body>
</html>