Promises with Fetch

by sbjami

HTML

<body>
  <h1>Promises with fetch</h1>
  <button id="fetchBtn">
    Fetch data
  </button>
  <p id="userData">
    User data goes here
  </p>
  <hr>
  <p id="postsData">
    Posts data goes here
  </p>
</body>

CSS

button {
  color: red;
}

JavaScript

const baseUrl = "https://jsonplaceholder.typicode.com";
const postsUrl = `${baseUrl}/posts`;
const usersUrl = `${baseUrl}/users`;
const userId = 1;

document.getElementById("fetchBtn").addEventListener("click", function() {
  fetch(`${usersUrl}/${userId}`)
    .then((response) => {
      return response.json();
    })
    .then((user) => {
      document.getElementById("userData").innerText = JSON.stringify(user);
      return user;
    })
    .then((user) => {
      fetch(`${postsUrl}?userId=${user.id}`)
        .then((response) => {
          return response.json();
        })
        .then((posts) => {
          document.getElementById("postsData").innerText = JSON.stringify(posts);
        })
    })
    .catch((error) => {
      console.error(error.message);
    })
})