How to append single div for the same JSON values?

Question

I have a JSON file that contains the sub divs and those sub divs have the device value of which device they belong to. So I need to create a loop using those device values. How can I achieve that?

Example: There is device 1 and device 2, I must create a single div for each - using their sub events values.

<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

You can iterate over the keys of the object, and find the correct device div element for each event. If one doesn't exist yet, you can add it to the 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

you can do that...

 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; }

result =

<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

You could reformat your object to be a list of devices that have arrays of sub events first, then output that to 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>