如何为相同的JSON值附加单个div？

Question

我有一个包含子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" }
}]

Answer 1

您可以迭代对象的键，并为每个事件找到正确的device元素。如果还不存在，则可以将其添加到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);
}

Answer 2

你可以这么做..。

​

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>

Answer 3

您可以将对象重新格式化为具有子事件数组的设备列表，然后将其输出到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>

​