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

【问题标题】：How to append single div for the same JSON values?如何为相同的 JSON 值附加单个 div？
【发布时间】：2022-01-10 22:20:47
【问题描述】：

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

【问题讨论】：

如果我的英文很复杂，请纠正我的问题，我的问题很难解释
您能否编辑您的问题以添加您想要的
结构的 HTML 示例？
谢谢，我编辑了，请大家再检查一遍
那些... 部分是什么？它们很重要吗？
因此，您的 JSON 数组因此只包含一个唯一元素（其中包含四个 event-x 对象）......那么为什么要使用数组？

标签： javascript jquery json foreach

【解决方案1】：

你可以这样做......

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>

【讨论】：

【解决方案2】：

您可以遍历对象的键，并为每个事件找到正确的设备 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);
}

【讨论】：

非常感谢，这个对我的情况有用
请注意，这个解决方案并不是最高效的 - 您正在为对象中的每个事件调用 document.querySelector - 如果对象非常大，您应该尝试类似的方法@MisterJojo 设备 div 存储在数组中，而不是每次迭代都从 DOM 中查询。
好的，我会的。非常感谢。

【解决方案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;

&lt;div id='container'&gt;&lt;/div&gt;

【讨论】：