I have a fetch request for my sample application, that receive a json. I’ve mapped this json and i can potentially display over 100 elements with a single request.
The problem is that i want to implement a load more button to make the page more simple to read and load (for example i want to display 20 items, and other 20 if the load more button is triggered).
Here is my sample request in a reproducible demo: https://jsfiddle.net/0mc3gn9f/
How can i implement a load more button in vanilla js?
JavaScript
x
29
29
1
let tableBody = document.getElementById("tab-body");2
3
4
fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=100&page=1&sparkline=false", {cache: "no-cache"})5
.then((response) => response.json())6
.then((data) => {7
this.criptoInfo = data;8
return this.criptoInfo;9
})10
.then((coinMap) => {11
let cripto = coinMap.map((coin) => {12
console.log(coin)13
let tr = document.createElement("tr");14
tableBody.appendChild(tr);15
tr.innerHTML = `<td>16
<div class="name-value coin-container">17
<img class="coin-image" src="${coin.image}">18
<p class="coin-name">${coin.name}</p>19
<p class="coin-abbrName">${coin.symbol}</p>20
</div>21
</td>22
<td><p class="price coin-name"><b>${coin.current_price} €</b></p></td>23
<td><p class="value-item coin-name">${coin.ath_change_percentage} %</p></td>24
<td><p class="value-item coin-name">${coin.high_24h} €</p></td>25
<td><p class="value-item coin-name">${coin.market_cap} €</p></td>26
<td><p class="value-item coin-name">${coin.total_supply} €</p></td>27
`;28
});29
});JavaScript
1
174
174
1
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,400;0,700;0,900;1,100&display=swap");2
nav {3
width: 100%;4
display: flex;5
justify-content: space-around;6
align-items: center;7
background-color: #040418;8
height: 20vh;9
}10
nav .logo {11
width: 110px;12
}13
nav .logo img {14
width: 100%;15
}16
nav a {17
margin: 1rem;18
text-decoration: none;19
font-weight: bolder;20
font-size: 1.8rem;21
color: #e0dada;22
}23
24
.box-table {25
margin-inline: 4rem;26
display: flex;27
justify-content: center;28
align-items: center;29
margin: 1rem;30
text-align: justify;31
}32
.box-table .coin-container {33
display: flex;34
align-items: center;35
justify-content: flex-start;36
gap: 0.5rem;37
padding: 1rem;38
}39
.box-table .coin-container img {40
width: 40px;41
}42
.box-table .coin-container .coin-abbrName {43
text-transform: uppercase;44
color: dimgray;45
}46
.box-table .name-value {47
width: 300px;48
}49
.box-table .price {50
width: 200px;51
}52
.box-table .value-item {53
width: 180px;54
}55
.box-table .more-coins {56
width: 250px;57
padding: 1rem;58
justify-content: center;59
}60
61
thead:after {62
content: "@";63
display: block;64
line-height: 30px;65
text-indent: -99999px;66
}67
68
#tab-body > tr {69
box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;70
}71
72
.presentation {73
height: 80vh;74
display: flex;75
justify-content: space-around;76
flex-wrap: wrap;77
background: #3903f9;78
background: linear-gradient(352deg, #3903f9 45%, #040418 70%);79
}80
.presentation .titles {81
width: 50%;82
display: flex;83
flex-wrap: wrap;84
justify-content: center;85
}86
.presentation .titles h1 {87
color: rgba(40, 40, 236, 0.966);88
font-size: 3rem;89
padding: 1rem;90
text-align: center;91
line-height: 2rem;92
margin-top: 4rem;93
margin-bottom: 3rem;94
}95
.presentation .titles h2 {96
font-size: 2rem;97
width: 500px;98
line-height: 3rem;99
justify-self: center;100
color: #fff;101
}102
.presentation .image-home-container {103
width: 50%;104
display: flex;105
justify-content: center;106
}107
.presentation .image-home-container .image-home {108
width: 250px;109
align-self: center;110
border: 0;111
}112
.presentation .image-home-container .image-home img {113
width: 100%;114
}115
.presentation button {116
width: 250px;117
height: 80px;118
background-color: #080808;119
border: 2px solid white;120
margin-bottom: 1rem;121
border-radius: 30px;122
font-size: 1.6rem;123
color: #fff;124
}125
.presentation button:hover {126
width: 300px;127
transition: 2s;128
font-size: 2rem;129
background-color: #fff;130
color: black;131
}132
133
* {134
margin: 0;135
padding: 0;136
box-sizing: border-box;137
font-family: "Lato", serif;138
}139
140
body,141
html {142
background-color: #fdfdfd;143
}144
145
.header-container {146
background-image: url(./assets/header.jpg);147
background-size: cover;148
background-repeat: no-repeat;149
background-position: center center;150
width: 100%;151
height: 400px;152
margin-bottom: 2rem;153
position: relative;154
}155
.header-container .heading-title {156
position: absolute;157
top: 50%;158
left: 50%;159
transform: translate(-50%, -50%);160
color: white;161
font-size: 2.48rem;162
font-family: Lato, serif;163
font-weight: 900;164
background: #0000005c;165
padding: 1rem;166
text-align: center;167
border-radius: 15px;168
}169
.header-container .heading-title h3 {170
font-size: 1.5rem;171
font-weight: 300;172
}173
174
/*# sourceMappingURL=style.css.map */JavaScript
1
36
36
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8"/>5
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>6
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>7
<title>Document</title>8
<link rel="stylesheet" href="style.css"/>9
<link10
href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Roboto+Mono:wght@300&display=swap"11
rel="stylesheet"12
/>13
</head>14
<body>15
<!-- TABLE -->16
<section>17
<div class="box-table">18
<table id="tab">19
<thead id="table-head">20
<tr>21
<th class="name-value">Nome</th>22
<th class="price">Prezzo</th>23
<th class="value-item">Variazione</th>24
<th class="value-item">Volume(24 h)</th>25
<th class="value-item">Capitalizzazione mercato</th>26
<th class="value-item">Offerta</th>27
</tr>28
</thead>29
<tbody id="tab-body"></tbody>30
</table>31
</div>32
<button id="load-more">Load More</button>33
</section>34
<script src="main.js"></script>35
</body>36
</html>Advertisement
Answer
JavaScript
1
2
1
https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=100&page=1&sparkline=false2
Actually, your API call already have
per_page=100 which is to get 100 items per page
page=1 which is to get data by page number
So we just need to change per_page=20 and make API call with incremental page number correctly
JavaScript
1
40
40
1
//global variable for pageIndex and it starts from 12
let pageIndex = 13
4
let tableBody = document.getElementById("tab-body");5
6
//populate a click event to load more button7
const loadMoreButton = document.getElementById("load-more");8
loadMoreButton.addEventListener("click", () => { fetchData(pageIndex++) }); //every click pageIndex increases 19
10
//fetch data with page index value11
function fetchData(pageIndexValue = 1) {12
fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=20&page=${pageIndexValue}&sparkline=false`, {cache: "no-cache"})13
.then((response) => response.json())14
.then((data) => {15
this.criptoInfo = data;16
return this.criptoInfo;17
})18
.then((coinMap) => {19
let cripto = coinMap.map((coin) => {20
let tr = document.createElement("tr");21
tableBody.appendChild(tr);22
tr.innerHTML = `<td>23
<div class="name-value coin-container">24
<img class="coin-image" src="${coin.image}">25
<p class="coin-name">${coin.name}</p>26
<p class="coin-abbrName">${coin.symbol}</p>27
</div>28
</td>29
<td><p class="price coin-name"><b>${coin.current_price} €</b></p></td>30
<td><p class="value-item coin-name">${coin.ath_change_percentage} %</p></td>31
<td><p class="value-item coin-name">${coin.high_24h} €</p></td>32
<td><p class="value-item coin-name">${coin.market_cap} €</p></td>33
<td><p class="value-item coin-name">${coin.total_supply} €</p></td>34
`;35
});36
});37
}38
39
//initial call when page load40
fetchData(pageIndex++)JavaScript
1
174
174
1
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,400;0,700;0,900;1,100&display=swap");2
nav {3
width: 100%;4
display: flex;5
justify-content: space-around;6
align-items: center;7
background-color: #040418;8
height: 20vh;9
}10
nav .logo {11
width: 110px;12
}13
nav .logo img {14
width: 100%;15
}16
nav a {17
margin: 1rem;18
text-decoration: none;19
font-weight: bolder;20
font-size: 1.8rem;21
color: #e0dada;22
}23
24
.box-table {25
margin-inline: 4rem;26
display: flex;27
justify-content: center;28
align-items: center;29
margin: 1rem;30
text-align: justify;31
}32
.box-table .coin-container {33
display: flex;34
align-items: center;35
justify-content: flex-start;36
gap: 0.5rem;37
padding: 1rem;38
}39
.box-table .coin-container img {40
width: 40px;41
}42
.box-table .coin-container .coin-abbrName {43
text-transform: uppercase;44
color: dimgray;45
}46
.box-table .name-value {47
width: 300px;48
}49
.box-table .price {50
width: 200px;51
}52
.box-table .value-item {53
width: 180px;54
}55
.box-table .more-coins {56
width: 250px;57
padding: 1rem;58
justify-content: center;59
}60
61
thead:after {62
content: "@";63
display: block;64
line-height: 30px;65
text-indent: -99999px;66
}67
68
#tab-body > tr {69
box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;70
}71
72
.presentation {73
height: 80vh;74
display: flex;75
justify-content: space-around;76
flex-wrap: wrap;77
background: #3903f9;78
background: linear-gradient(352deg, #3903f9 45%, #040418 70%);79
}80
.presentation .titles {81
width: 50%;82
display: flex;83
flex-wrap: wrap;84
justify-content: center;85
}86
.presentation .titles h1 {87
color: rgba(40, 40, 236, 0.966);88
font-size: 3rem;89
padding: 1rem;90
text-align: center;91
line-height: 2rem;92
margin-top: 4rem;93
margin-bottom: 3rem;94
}95
.presentation .titles h2 {96
font-size: 2rem;97
width: 500px;98
line-height: 3rem;99
justify-self: center;100
color: #fff;101
}102
.presentation .image-home-container {103
width: 50%;104
display: flex;105
justify-content: center;106
}107
.presentation .image-home-container .image-home {108
width: 250px;109
align-self: center;110
border: 0;111
}112
.presentation .image-home-container .image-home img {113
width: 100%;114
}115
.presentation button {116
width: 250px;117
height: 80px;118
background-color: #080808;119
border: 2px solid white;120
margin-bottom: 1rem;121
border-radius: 30px;122
font-size: 1.6rem;123
color: #fff;124
}125
.presentation button:hover {126
width: 300px;127
transition: 2s;128
font-size: 2rem;129
background-color: #fff;130
color: black;131
}132
133
* {134
margin: 0;135
padding: 0;136
box-sizing: border-box;137
font-family: "Lato", serif;138
}139
140
body,141
html {142
background-color: #fdfdfd;143
}144
145
.header-container {146
background-image: url(./assets/header.jpg);147
background-size: cover;148
background-repeat: no-repeat;149
background-position: center center;150
width: 100%;151
height: 400px;152
margin-bottom: 2rem;153
position: relative;154
}155
.header-container .heading-title {156
position: absolute;157
top: 50%;158
left: 50%;159
transform: translate(-50%, -50%);160
color: white;161
font-size: 2.48rem;162
font-family: Lato, serif;163
font-weight: 900;164
background: #0000005c;165
padding: 1rem;166
text-align: center;167
border-radius: 15px;168
}169
.header-container .heading-title h3 {170
font-size: 1.5rem;171
font-weight: 300;172
}173
174
/*# sourceMappingURL=style.css.map */JavaScript
1
36
36
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8"/>5
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>6
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>7
<title>Document</title>8
<link rel="stylesheet" href="style.css"/>9
<link10
href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Roboto+Mono:wght@300&display=swap"11
rel="stylesheet"12
/>13
</head>14
<body>15
<!-- TABLE -->16
<section>17
<div class="box-table">18
<table id="tab">19
<thead id="table-head">20
<tr>21
<th class="name-value">Nome</th>22
<th class="price">Prezzo</th>23
<th class="value-item">Variazione</th>24
<th class="value-item">Volume(24 h)</th>25
<th class="value-item">Capitalizzazione mercato</th>26
<th class="value-item">Offerta</th>27
</tr>28
</thead>29
<tbody id="tab-body"></tbody>30
</table>31
</div>32
<button id="load-more">Load More</button>33
</section>34
<script src="main.js"></script>35
</body>36
</html>The full implementation here https://jsfiddle.net/691jp7cy/