Javascript 中的 JSON 输出到 HTML

Question

我有一个如下的 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;

    }

}

将不胜感激这方面的一些帮助。谢谢

Answer 1

您可以映射dimBreak数组并创建所需的 html 标记。之后，您可以将生成的 html 标记注入到DOM.PS As.map()函数返回一个数组，在将生成的 html 字符串插入之前DOM，对返回的数组调用.join()函数，将所有数组元素组合成一个字符串。const obj = {&nbsp; "556520000": {&nbsp; &nbsp; "lmin": "35",&nbsp; &nbsp; "dm": [&nbsp; &nbsp; &nbsp; { "Width": "147" },&nbsp; &nbsp; &nbsp; { "Depth": "10" },&nbsp; &nbsp; &nbsp; { "Height": "137" }&nbsp; &nbsp; ],&nbsp; &nbsp; "lmax": "68",&nbsp; }};var SKU = "556520000";var dimBreak = obj[SKU]["dm"];let charCode = 65; // Aconst html = dimBreak.map(obj => {&nbsp; const [key, value] = Object.entries(obj).flat();&nbsp; return `&nbsp; &nbsp; &nbsp;<li>&nbsp; &nbsp; &nbsp; &nbsp;<span>${String.fromCharCode(charCode++)}</span>&nbsp; &nbsp; &nbsp; &nbsp;${key}: ${value}&nbsp; &nbsp; &nbsp;</li>&nbsp; `;});const list = document.querySelector('#sku_DM ul');list.innerHTML = html.join('');<span id="sku_DM">&nbsp; <ul>&nbsp; </ul></span>

Answer 2

从您的话中，我了解到您在渲染时不需要任何花哨的东西或任何类型的数据操作。为什么不使用一些旧的preHTML 标签？const data = {&nbsp; &nbsp;"556520000": {&nbsp; &nbsp; &nbsp; "lmin":"35",&nbsp; &nbsp; &nbsp; "dm":[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Width":"147"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Depth":"10"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Height":"137"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; "lmax":"68",&nbsp; &nbsp;}}const dmset = Object.values(data).map(({ dm }) => dm)document.querySelector('pre').innerHTML = JSON.stringify(dmset, null, 2)<pre></pre>&nbsp;