Tengo un archivo JSON que contiene los subdivs y esos subdivs tienen el valor del dispositivo al que pertenecen. Entonces necesito crear un bucle usando esos valores de dispositivo. ¿Cómo puedo lograr eso?
Ejemplo: hay un dispositivo 1 y un dispositivo 2, debo crear un solo div para cada uno, usando sus valores de subeventos.
<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" } }]usted puede hacer eso...
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; }resultado =
<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>Puede reformatear su objeto para que sea una lista de dispositivos que tienen matrices de subeventos primero, luego enviar eso a 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>Puede iterar sobre las claves del objeto y encontrar el elemento div del dispositivo correcto para cada evento. Si aún no existe, puede agregarlo al 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); }