title: errorTypeError: Cannot read properties of undefined (reading 'map')
body: <p>I'm trying to use Strapi Headless CMS to create blog posts. I managed to fetch the JSON data but I'm unable to display it as HTML using the map() function. I want to display this data into the HTML but I keep getting this error. I already tried with a for loop and foreach() but I keep getting the same error like this or errorTypeError: Cannot read properties of undefined (reading 'data'). Here's my code so far:</p>
  <pre><code> const blogPosts = &quot;http://localhost:1337/api/blogposts&quot;;
  
  fetch(blogPosts)
  .then((response) =&gt; {
    return response.json();
  })
  .then((data) =&gt; console.log(data.data[0].attributes))
  
  .then((data) =&gt; {
    let posts = data;
  
    posts.map(function (post) {
      let body = document.createElement(&quot;div&quot;);
  
      body.innerHTML = `${post.data.data[0].attributes.body}`;
      li.appendChild(body);
    });
  })
  
  .catch(function (err) {
    console.log(&quot;error&quot; + err);
  });
  </code></pre>
  <p>The JSON file looks like this:</p>
  <pre><code>{data: Array(1)
       data: Array(1)
         0:
           attributes:
             body: &quot;text&quot;
             createdAt: &quot;2022-02-11T10:29:48.930Z&quot;
             publishedAt: &quot;2022-02-11T10:29:58.780Z&quot;
             updatedAt: &quot;2022-02-11T10:29:58.790Z&quot;
  </code></pre>