显示来自 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 循环，但我不太确定如何编写它。

Answer 1

您可以使用for循环遍历您的json数据并获取特定键的值并将生成的值分配html给您的div.演示代码：//your responsevar response = {&nbsp; "posts": [{&nbsp; &nbsp; &nbsp; "id": "5efb6946eab44526aecc0aaf",&nbsp; &nbsp; &nbsp; "title": "post 2Test",&nbsp; &nbsp; &nbsp; "slug": "post-2test",&nbsp; &nbsp; &nbsp; "html": "<p>Test post 2... Testing 123 testing 123</p>",&nbsp; &nbsp; &nbsp; "feature_image": null,&nbsp; &nbsp; &nbsp; "excerpt": "Test post 1"&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "id": "5efb6936eab44526aecc0aa9",&nbsp; &nbsp; &nbsp; "title": "Test Post",&nbsp; &nbsp; &nbsp; "slug": "test-post",&nbsp; &nbsp; &nbsp; "html": "<p>Test post one... Testing 123</p>",&nbsp; &nbsp; &nbsp; "feature_image": null,&nbsp; &nbsp; &nbsp; "excerpt": "Test post 2"&nbsp; &nbsp; }&nbsp; ],&nbsp; "meta": {&nbsp; &nbsp; "pagination": {&nbsp; &nbsp; &nbsp; "page": 1,&nbsp; &nbsp; &nbsp; "limit": 15,&nbsp; &nbsp; &nbsp; "pages": 1,&nbsp; &nbsp; &nbsp; "total": 2,&nbsp; &nbsp; &nbsp; "next": null,&nbsp; &nbsp; &nbsp; "prev": null&nbsp; &nbsp; }&nbsp; }};&nbsp;&nbsp; var html = '';&nbsp; //looping through posts&nbsp;&nbsp; for(var i= 0 ; i<response.posts.length ;i++ ){&nbsp; //get values&nbsp; &nbsp;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>';&nbsp;&nbsp; }&nbsp; //add to div&nbsp; document.getElementById("data").innerHTML= html;<div class="container" id="data">&nbsp; <!--here data will come--></div>

Answer 2

我们可以通过几个步骤来实现，首先，将 id 添加到 div。现在添加将调用 javascript 代码的脚本标记。（如果您的框架处理它，我不知道您使用的是哪个框架，然后忽略此步骤）。现在用于Json.parse(response)在您的 javascript 文件中转换为 JavaScript 对象，现在使用过滤器/类似功能，并找到最近的一篇和剩余的帖子。现在使用文档对象通过使用您在第 1 点中创建的唯一 ID 来调用您的 div，现在在那里分配/创建您的 Html。希望这可以帮助。