title: Fetching data with vanilla Javascript and displaying it in html
body: <p>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.</p>
  <p>Currently I get the data with <code>fetch</code>, however when I try to display that data on <code>html</code> I'm just getting the very first object in the <code>array</code> not all the objects.</p>
  <p>I will like to get a list of all the posts in my html.</p>
  <p>Thanks in advance</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang='en'&gt;
  
  &lt;head&gt;
    &lt;meta charset='UTF-8'&gt;
    &lt;meta http-equiv='X-UA-Compatible' content='IE=edge'&gt;
    &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="d-flex justify-content-center"&gt;
      &lt;div class="spinner-border" role="status" id="loading"&gt;
        &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;h1&gt;List of Posts&lt;/h1&gt;
    &lt;section id="section"&gt;
      &lt;ul id='posts'&gt;&lt;/ul&gt;
    &lt;/section&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
    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()
  &lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>