javascript - getting undefined when trying to fetch data from api and change innerHTML. data shows on console but not in html page

Question

const buildPosts = (blogPosts) => {
  let blogPostsContent = "";

  for (blogPost of blogPosts) {
    const postDate = new Date(blogPosts.added_date).toDateString();

    blogPostsContent += `
        <div class="post">
                <div class="post-img"></div>
                <div class="post-content">
                     <div class="post-date">${postDate}</div>
                    <div class="post-title"><h4>${blogPosts.title}</h4></div>
                    <div class="post-text">${blogPosts.content}</div>
                </div>
        </div>
             `;
  }
  document.querySelector(".blog-posts").innerHTML = blogPostsContent;
};

标签： javascripthtml

Answer 1

Since it's for (blogPost of blogPosts), you should access in the inner loop as blogPost instead of blogPosts.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

const blogPosts = [
  {
    added_date: '2021-01-01T05:07:59Z',
    title: 'Title1',
    content: 'Content1'
  },
  {
    added_date: '2021-01-02T05:07:59Z',
    title: 'Title2',
    content: 'Content2'
  }
];
let blogPostsContent = "";
for(blogPost of blogPosts) {
    const postDate = new Date(blogPost.added_date).toDateString();
    
    blogPostsContent += `
    <div class="post">
            <div class="post-img"></div>
            <div class="post-content">
                 <div class="post-date">${postDate}</div>
                <div class="post-title"><h4>${blogPost.title}</h4></div>
                <div class="post-text">${blogPost.content}</div>
            </div>
    </div>
         `
 }
document.querySelector('.blog-posts').innerHTML = blogPostsContent;

.post {
  border: 1px solid red;
}

<div class="blog-posts"></div>