首頁猿問 Javascript 中的...

Javascript 中的 JSON 輸出到 HTML

JavaScript

qq_遁去的一_1 2022-11-11 13:08:30

我有一個如下的 JSON 輸出{ "556520000":{ "lmin":"35", "dm":[ { "Width":"147" }, { "Depth":"10" }, { "Height":"137" } ], "lmax":"68", }}我正在嘗試將 dm 密鑰輸出到 html 中，所以我得到了類似的東西<ul><li>A Width: 147</li><li>B Depth: 10</li><li>C Height: 137</li></ul>到目前為止，我的 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>

${String.fromCharCode(charCode++)}

${key}: ${value}

</li>

});

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

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

<ul>

</ul>

反對回復 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)

反對回復 2022-11-11

2 回答
0 關注
102 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

Javascript 中的 JSON 輸出到 HTML

Javascript 中的 JSON 輸出到 HTML

2 回答

添加回答