我有一个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;
}
}
希望对此有所帮助。谢谢
您可以映射dimBreak数组并创建所需的html标记。之后，您可以将生成的html标记注入DOM。
PS As.map()函数返回一个数组，然后将生成的html字符串插入到返回数组的DOMcall.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句