显示javascript嵌套对象到html

Question

data是这样的:

{
"1111": {
[{
id: "1111",
name: "name",
randomvalue: "1",
},
{
id: "1111",
name: "name2",
randomvalue: "2",
}]
},
"0101": {
[{
id: "0101",
name: "name3",
randomvalue: "3"
},
{
id: "0101",
name: "name4",
randomvalue: "1"
}]
},
"0001": {
[{
id: "0001",
name: "name5",
randomvalue: "4"
}]
}
}

randomvalue总是在有新数据时发生变化，但id和名称保持不变。我希望数据显示在html上，因为它是在这里，但当随机值更新，html也必须更新。我没有使用任何框架，只是nodejs。

清晰:为每个对象创建一个新的html<div>元素。每个<div>将有三个<p>值。结果最初看起来像这样:

<div class="container">
<p class="id">1111</p>
<p class="name">name</p>
<p class="randomval">1</p>
</div>
<div class="container">
<p class="id">1111</p>
<p class="name">name2</p>
<p class="randomval">2</p>
</div>
<div class="container">
<p class="id">0101</p>
<p class="name">name3</p>
<p class="randomval">3</p>
</div>
<div class="container">
<p class="id">0101</p>
<p class="name">name4</p>
<p class="randomval">1</p>
</div>
<div class="container">
<p class="id">0001</p>
<p class="name">name5</p>
<p class="randomval">4</p>
</div>

如果在每个对象中都有randomvalue更改，那么它将是:

<div class="container">
<p class="id">1111</p>
<p class="name">name</p>
<p class="randomval"> <new_random_value> </p>
</div>
<div class="container">
<p class="id">1111</p>
<p class="name">name2</p>
<p class="randomval"> <new_random_value> </p>
</div>
<div class="container">
<p class="id">0101</p>
<p class="name">name3</p>
<p class="randomval"> <new_random_value> </p>
</div>
<div class="container">
<p class="id">0101</p>
<p class="name">name4</p>
<p class="randomval"> <new_random_value> </p>
</div>
<div class="container">
<p class="id">0001</p>
<p class="name">name5</p>
<p class="randomval"> <new_random_value> </p>
</div>

Answer 1

你可以这样做

const toHtml = data => data.map(({id, name, randomvalue}) => {
return `<div class="container">
<p class="id">${id}</p>
<p class="name">${name}</p>
<p class="randomval"> ${randomvalue} </p>
</div>`
}).join('')

const initialData  = {
"1111": 
[{
id: "1111",
name: "name",
randomvalue: "1",
},
{
id: "1111",
name: "name2",
randomvalue: "2",
}]
,
"0101": 
[{
id: "0101",
name: "name3",
randomvalue: "3"
},
{
id: "0101",
name: "name4",
randomvalue: "1"
}]
,
"0001": 
[{
id: "0001",
name: "name5",
randomvalue: "4"
}]

}
const toArray = data => Object.values(initialData).flat()
const groupById = data => data.reduce((res, item) =>({...res, [item.id]: [...(res[item.id] || []), item]}), {})
document.getElementById('main').innerHTML = toHtml(toArray(initialData))

setTimeout(() => {
const newData = toArray(initialData).map(item => ({...item, randomvalue: Math.ceil(Math.random() * 100)}))
document.getElementById('main').innerHTML = toHtml(newData)
}, 3000)

<div id="main"></div>

Answer 2

您需要为自定义显示编写一些对象的递归解析。
如果您只需要显示数据，您可以使用json.stringify(yourData)