Fetching data with vanilla Javascript and displaying it in html

Question

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>

But what does your data look like? Also, if you know it's an array of items, why are you not iterating the array? — Lee Taylor
– Lee Taylor, Commented Apr 8, 2022 at 14:43

Yami · Accepted Answer · 2022-04-08 15:26:55Z

3

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);
}

answered Apr 8, 2022 at 15:26

Yami

713 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetching data with vanilla Javascript and displaying it in html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related