我有一個包含子 div 的 JSON 檔案，這些子 div 具有它們所屬設備的設備值。所以我需要使用這些設備值創建一個回圈。我怎樣才能做到這一點？
示例：有設備 1 和設備 2，我必須為每個設備創建一個 div - 使用它們的子事件值。
<div id="device-1">
<div id="event-1"></div>
<div id="event-2"></div>
</div>
<div id="device-2">
<div id="event-3"></div>
<div id="event-4"></div>
</div>
[ { "event-1": { "device": "1" }
, "event-2": { "device": "1" }
, "event-3": { "device": "2" }
, "event-4": { "device": "2" }
}
]
uj5u.com熱心網友回復：
你可以這樣做...
const data =
[ { "event-1": { "device": "1", otherA : "a", otherB : "b" /* , otherX : "x" */ }
, "event-2": { "device": "1", otherA : "a", otherB : "b" /* , otherX : "x" */ }
, "event-3": { "device": "2", otherA : "a", otherB : "b" /* , otherX : "x" */ }
, "event-4": { "device": "2", otherA : "a", otherB : "b" /* , otherX : "x" */ }
} ]
Object.entries(data[0]).reduce((acc,[event_id,{device, ...others }])=>
{
if (!acc[device])
{
acc[device] = document.body.appendChild(document.createElement('div'))
acc[device].id = `device-${device}`
}
let event_el = acc[device].appendChild(document.createElement('div'))
event_el.id = event_id
return acc
},{})div { width:20em; height: 1em;}
body > div { background: blue; padding: 1em;}
body > div > div { background: green; }結果 =
<div id="device-1">
<div id="event-1"></div>
<div id="event-2"></div>
</div>
<div id="device-2">
<div id="event-3"></div>
<div id="event-4"></div>
</div>
uj5u.com熱心網友回復：
您可以遍歷物件的鍵，并為每個事件找到正確的設備 div 元素。如果尚不存在，您可以將其添加到 DOM。
const arr = [
{
'event-1': {
device: '1',
},
'event-2': {
device: '1',
},
'event-3': {
device: '2',
},
'event-4': {
device: '2',
},
},
];
const events = arr[0];
for (const eventName of Object.keys(events)) {
const event = events[eventName];
const deviceID = `device-${event.device}`;
let deviceDiv = document.querySelector('#' deviceID);
if (!deviceDiv) {
deviceDiv = document.createElement('div');
deviceDiv.id = deviceID;
document.body.appendChild(deviceDiv);
}
const eventDiv = document.createElement('div');
eventDiv.id = eventName;
deviceDiv.appendChild(eventDiv);
}
uj5u.com熱心網友回復：
您可以將物件重新格式化為首先具有子事件陣列的設備串列，然后將其輸出到 HTML
let json = [{
"event-1": {
"device": "1"
},
"event-2": {
"device": "1"
},
"event-3": {
"device": "2"
},
"event-4": {
"device": "2"
}
}]
let devices = Object.keys(json[0]).reduce((b, a) => {
let de = json[0][a].device
b[de] = b[de] || [];
b[de].push(a);
return b;
}, {})
//console.log(devices)
let content = '';
for (k in devices) {
content = `<div class='device'> <h2>Device ${k}</h2>${devices[k].join('<br />')}</div>`
}
document.querySelector('#container').innerHTML = content;<div id='container'></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/407962.html
標籤：