javascript - 显示来自 JSON API 响应的帖子列表

Question

我有以下 JSON

{
   "posts":[
      {
         "id":"5efb6946eab44526aecc0aaf",
         "title":"post 2Test",
         "slug":"post-2test",
         "html":"<p>Test post 2... Testing 123 testing 123</p>",
         "feature_image":null,
         "excerpt": "Test post 1"
      },
      {
         "id":"5efb6936eab44526aecc0aa9",
         "title":"Test Post",
         "slug":"test-post",
         "html":"<p>Test post one... Testing 123</p>",
         "feature_image":null,
       "excerpt": "Test post 2"
      }
   ],
   "meta":{
      "pagination":{
         "page":1,
         "limit":15,
         "pages":1,
         "total":2,
         "next":null,
         "prev":null
      }
   }
}

我将如何创建一个列出所有当前帖子和任何添加的部分？

例如 HTML

<div class="container">
    <div class="post"> <!-- this would contain the information from the most recent post -->
       <img src={featured_img} alt="featured img">
       <h2>{title}</h2>
       <p>{excerpt}</p>
    </div>
    <div class="post"> <!-- this would contain the info of the second most recent post -->
       <img src={featured_img} alt="featured img">
       <h2>{title}</h2>
       <p>{excerpt}</p>
    </div>
</div>

我的猜测是某种 for 循环，但我不太确定如何编写它。

标签： javascripthtmljson

Answer 1

您可以使用for循环遍历您的json数据并获取特定键的值并将生成的值分配html给您的div.

演示代码：

//your response
var response = {
  "posts": [{
      "id": "5efb6946eab44526aecc0aaf",
      "title": "post 2Test",
      "slug": "post-2test",
      "html": "<p>Test post 2... Testing 123 testing 123</p>",
      "feature_image": null,
      "excerpt": "Test post 1"
    },
    {
      "id": "5efb6936eab44526aecc0aa9",
      "title": "Test Post",
      "slug": "test-post",
      "html": "<p>Test post one... Testing 123</p>",
      "feature_image": null,
      "excerpt": "Test post 2"
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "limit": 15,
      "pages": 1,
      "total": 2,
      "next": null,
      "prev": null
    }
  }
};

 
  var html = '';
  //looping through posts
 
  for(var i= 0 ; i<response.posts.length ;i++ ){
  //get values
   html += '<div class="post" data-value='+response.posts[i].id+'><img src='+response.posts[i].feature_image+' alt="featured img"><h2>'+response.posts[i].title+'</h2><p>'+response.posts[i].excerpt+'</p></div>';
 
  }
  //add to div
  document.getElementById("data").innerHTML= html;

<div class="container" id="data">
  <!--here data will come-->
</div>