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 = {

  "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>

Answer 2

从您的话中，我了解到您在渲染时不需要任何花哨的东西或任何类型的数据操作。为什么不使用一些旧的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>