第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

顯示來(lái)自 JSON API 響應(yīng)的帖子列表

顯示來(lái)自 JSON API 響應(yīng)的帖子列表

慕絲7291255 2022-10-27 15:38:00
我有以下 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      }   }}我將如何創(chuàng)建一個(gè)列出所有當(dāng)前帖子和任何添加的部分?例如 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>我的猜測(cè)是某種 for 循環(huán),但我不太確定如何編寫(xiě)它。
查看完整描述

2 回答

?
翻過(guò)高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊

您可以使用for循環(huán)遍歷您的json數(shù)據(jù)并獲取特定鍵的值并將生成的值分配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>


查看完整回答
反對(duì) 回復(fù) 2022-10-27
?
慕的地8271018

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

我們可以通過(guò)幾個(gè)步驟來(lái)實(shí)現(xiàn),

  1. 首先,將 id 添加到 div。

  2. 現(xiàn)在添加將調(diào)用 javascript 代碼的腳本標(biāo)記。(如果您的框架處理它,我不知道您使用的是哪個(gè)框架,然后忽略此步驟)。

  3. 現(xiàn)在用于Json.parse(response)在您的 javascript 文件中轉(zhuǎn)換為 JavaScript 對(duì)象,現(xiàn)在使用過(guò)濾器/類似功能,并找到最近的一篇和剩余的帖子。

  4. 現(xiàn)在使用文檔對(duì)象通過(guò)使用您在第 1 點(diǎn)中創(chuàng)建的唯一 ID 來(lái)調(diào)用您的 div,現(xiàn)在在那里分配/創(chuàng)建您的 Html。

希望這可以幫助。


查看完整回答
反對(duì) 回復(fù) 2022-10-27
  • 2 回答
  • 0 關(guān)注
  • 117 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)