Replace fetch link with html button

This code is designed to take a data from API, convert it to JSON and display it in the HTML page (with a specific design). There are two buttons on the HTML page that are for changing the page (to change the page, the URL sent to fetch needs to be changed by clicking the buttons (which is where my problem is(: )).

I want to display the first page when the page is loaded, the second page when the “Next” button is clicked, and the first page again when the “Previous” button is clicked.

First page : “https://reqres.in/api/users?page=1”. Second page : “https://reqres.in/api/users?page=2”.

let response;
async function getData() {
    response = await ((await fetch("https://reqres.in/api/users?page=1")).json());

    response = response.data;
    return response.map(user => user);
}

document.getElementById("btn0").addEventListener("click", async () => {
    response = await ((await fetch("https://reqres.in/api/users?page=1")).json()); //first page
    response = response.data;
    return response.map(user => user);
});
document.getElementById("btn1").addEventListener("click", async () => {
    response = await ((await fetch("https://reqres.in/api/users?page=2")).json()); //second page
    response = response.data;
    return response.map(user => user);
});

getData()
    .then(data => {
        function user(index) {
            let img = document.createElement("img");
            img.src = data[index].avatar;

            let div = document.getElementById(index);
            div.appendChild(img);

            let p = document.getElementById(index + 6);

            let forP = document.getElementById("forP");

            p.innerHTML = `id: ${data[index].id}. <br> firstName: ${data[index].first_name}. <br> email: ${data[index].email}.`;

            forP.appendChild(p);
        }
        for (let i = 0; i < data.length; i++) {
            user(i);
        }
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="display.css">
</head>
<body>
<label style="position: absolute; top: 12px; left: 600px">
    <button id="btn0">Next</button>
    <button id="btn1">Previous</button>
</label>
<div id="0"></div>
<p id="6" class="p0" style="position: absolute; top: 12px; left: 150px"></p>

<div id="1"></div>
<p id="7" class="p1" style="position: absolute; top: 150px; left: 150px"></p>

<div id="2"></div>
<p id="8" class="p2" style="position: absolute; top: 280px; left: 150px"></p>

<div id="3"></div>
<p id="9" class="p3" style="position: absolute; top: 420px; left: 150px"></p>

<div id="4" ></div>
<p id="10" class="p4" style="position: absolute; top: 550px; left: 150px"></p>

<div id="5"></div>
<p id="11" class="p5" style="position: absolute; top: 690px; left: 150px"></p>
<div id="forP"></div>
<script src="fp.js"></script>
</body>
</html>

Answer

you can save the page number in a data attribute and pass its value to the fetch link.

let response;
async function getData(pageNum) {
  response = await ((await fetch(`https://reqres.in/api/users?page=${pageNum}`)).json());

  response = response.data;
  return response.map(user => user);
}

document.querySelectorAll(".btn").forEach(el => {
  el.addEventListener("click", () => {
    const pageNum = el.dataset.pageNum;
    updateContent(pageNum);
  })
})

function updateContent(pageNum) {
  return getData(pageNum)
    .then(data => {
      function user(index) {
        let img = document.createElement("img");
        img.src = data[index].avatar;

        let div = document.getElementById(index);
        div.replaceChildren();
        div.appendChild(img);

        let p = document.getElementById(index + 6);

        let forP = document.getElementById("forP");

        p.innerHTML = `id: ${data[index].id}. <br> firstName: ${data[index].first_name}. <br> email: ${data[index].email}.`;

        forP.appendChild(p);
      }
      for (let i = 0; i < data.length; i++) {
        user(i);
      }
    });
};

updateContent(1);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="display.css">
</head>

<body>
  <label style="position: absolute; top: 12px; left: 600px">
    <button class="btn" data-page-num="1">Next</button>
    <button class="btn" data-page-num="2">Previous</button>
</label>
  <div id="0"></div>
  <p id="6" class="p0" style="position: absolute; top: 12px; left: 150px"></p>

  <div id="1"></div>
  <p id="7" class="p1" style="position: absolute; top: 150px; left: 150px"></p>

  <div id="2"></div>
  <p id="8" class="p2" style="position: absolute; top: 280px; left: 150px"></p>

  <div id="3"></div>
  <p id="9" class="p3" style="position: absolute; top: 420px; left: 150px"></p>

  <div id="4"></div>
  <p id="10" class="p4" style="position: absolute; top: 550px; left: 150px"></p>

  <div id="5"></div>
  <p id="11" class="p5" style="position: absolute; top: 690px; left: 150px"></p>
  <div id="forP"></div>
  <script src="fp.js"></script>
</body>

</html>

Advertisement

Answer