亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Javascript 中的 JSON 輸出到 HTML

Javascript 中的 JSON 輸出到 HTML

qq_遁去的一_1 2022-11-11 13:08:30
我有一個如下的 JSON 輸出{   "556520000":{      "lmin":"35",      "dm":[         {            "Width":"147"         },         {            "Depth":"10"         },         {            "Height":"137"         }      ],      "lmax":"68",   }}我正在嘗試將 dm 密鑰輸出到 html 中,所以我得到了類似的東西<span id="sku_DM"><ul><li><span>A</span> Width: 147</li><li><span>B</span> Depth: 10</li><li><span>C</span> Height: 137</li></ul></span>到目前為止,我的 JS 輸出到控制臺沒問題,但是當我嘗試在 ID #sku_DM 中輸出為 HTML 時,它只是放置了最后一個值,而不是我在控制臺中的值。我的JS代碼如下var SKU = "556520000";var dimBreak = obj[SKU]["dm"];for(var i = 0; i < dimBreak.length; i++){    const dimAll = dimBreak[i];    let entries = Object.entries(dimAll);        for(const [prop, val] of entries) {        console.log(prop, val);        var fullDimensions = (prop, val);        document.getElementById("sku_DM").innerHTML = fullDimensions;    }}將不勝感激這方面的一些幫助。謝謝
查看完整描述

2 回答

?
梵蒂岡之花

TA貢獻1900條經驗 獲得超5個贊

您可以映射dimBreak數組并創建所需的 html 標記。之后,您可以將生成的 html 標記注入到DOM.


PS As.map()函數返回一個數組,在將生成的 html 字符串插入之前DOM,對返回的數組調用.join()函數,將所有數組元素組合成一個字符串。


const obj = {

  "556520000": {

    "lmin": "35",

    "dm": [

      { "Width": "147" },

      { "Depth": "10" },

      { "Height": "137" }

    ],

    "lmax": "68",

  }

};


var SKU = "556520000";

var dimBreak = obj[SKU]["dm"];


let charCode = 65; // A

const html = dimBreak.map(obj => {

  const [key, value] = Object.entries(obj).flat();

  return `

     <li>

       <span>${String.fromCharCode(charCode++)}</span>

       ${key}: ${value}

     </li>

  `;

});


const list = document.querySelector('#sku_DM ul');

list.innerHTML = html.join('');

<span id="sku_DM">

  <ul>

  </ul>

</span>


查看完整回答
反對 回復 2022-11-11
?
慕后森

TA貢獻1802條經驗 獲得超5個贊

從您的話中,我了解到您在渲染時不需要任何花哨的東西或任何類型的數據操作。為什么不使用一些舊的preHTML 標簽?


const data = {

   "556520000": {

      "lmin":"35",

      "dm":[

         {

            "Width":"147"

         },

         {

            "Depth":"10"

         },

         {

            "Height":"137"

         }

      ],

      "lmax":"68",

   }

}


const dmset = Object.values(data).map(({ dm }) => dm)


document.querySelector('pre').innerHTML = JSON.stringify(dmset, null, 2)

<pre></pre> 


查看完整回答
反對 回復 2022-11-11
  • 2 回答
  • 0 關注
  • 102 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號