Fetching data with vanilla Javascript and displaying it in html

Ok I'm trying to consume a simple API and loop through all the data I received and display it on html. I'm stumbling on something simple and I cannot figure out where I'm making the mistake.

Currently I get the data with fetch, however when I try to display that data on html I'm just getting the very first object in the array not all the objects.

I will like to get a list of all the posts in my html.

Thanks in advance

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

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>

<body>

  <div class="d-flex justify-content-center">
    <div class="spinner-border" role="status" id="loading">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
  <h1>List of Posts</h1>
  <section id="section">
    <ul id='posts'></ul>
  </section>
</body>

<script>
  const API_URL = `https://jsonplaceholder.typicode.com`

  async function fetchPosts() {
    const response = await fetch(`${API_URL}/posts`)
    let data = await response.json()

    // console.log(data)

    if (response) {
      hideloader();
    }

    show(data)

  }

  function hideloader() {
    document.getElementById('loading').style.display = 'none';
  }


  function show(data) {
    console.log(data, ' inside show')
    const ul = document.getElementById('posts')
    const list = document.createDocumentFragment();
    let li = document.createElement('li');
    let title = document.createElement('h1');
    let body = document.createElement('p')
    data.map(function (post) {

      title.innerHTML = `${post.title}`;
      body.innerHTML = `${post.body}`;

      li.appendChild(title);
      li.appendChild(body);
      list.appendChild(li);

      // console.log(list)
      // console.log(li)
    })
    ul.appendChild(list);
  }

    fetchPosts()
</script>

</html>

Solution

In the show(data) function, when you map the data, the title.innerHTML and body.innerHTML are reassigned constantly. You should create the list title and body elements in the iteration.

function show(data) {
    const ul = document.getElementById('posts');
    const list = document.createDocumentFragment();

    data.map(function (post) {
        let li = document.createElement('li');
        let title = document.createElement('h1');
        let body = document.createElement('p');
        title.innerHTML = `${post.title}`;
        body.innerHTML = `${post.body}`;

        li.appendChild(title);
        li.appendChild(body);
        list.appendChild(li);
    });

    ul.appendChild(list);
}