How to append single div for the same JSON values?

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>

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

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>

How to append single div for the same JSON values?

Related

Recent Posts