Tengo un par de objetos y cuando los agrego al HTML interno deseo incluir cada objeto con un elemento 'div'. Entonces, 'sentimientos' se incluiría en un conjunto de elementos 'div' y 'feelings2' se incluiría en su propio conjunto de elementos 'div'. ¿Alguien puede ayudarme?
Este a continuación es el HTML al que se hace referencia en el código javascript
<div class="tables"> <table > <tbody class="row" id="tableData"></tbody> </table>Estos 2 son la muestra del objeto.
const feelings = [ { menuItem: happy[0], description: happy[1], value: 5 }, { menuItem: excited[0], description: excited[1], value: 6 }, { menuItem: sad[0], description: sad[1], value: 1 }, { menuItem: furious[0], description: furious[1], value: 0 } ]; const feelings2 = [ { menuItem: happier[0], description: happier[1], value: 5 }, { menuItem: excited2[0], description: excited2[1], value: 6 }, { menuItem: sadder[0], description: sadder[1], value: 1 }, { menuItem: furious2[0], description: furious2[1], value: 0 } ];Este es el javascript que agrega los datos de los objetos al HTML interno
let tbody = '<tbody>'; function addToTableBody(feeling) { let returnVal = ""; for (const { menuItem, description, value } of Object.values(feeling)) { returnVal += ` <tr class="rows"> <td class="menuItem">${menuItem}</td> <div class="hide description">${description}</div> <td>${value}</td> </tr> ` } return returnVal; } tbody += addToTableBody(feelings) tbody += addToTableBody(feelings2); tbody += '</tbody>'; document.getElementById('tableData').innerHTML = tbody;El siguiente ejemplo presenta una función que aceptará un objeto DOM y una matriz de objetos y representará una tabla HTML con las claves como <th> y todos los valores en <td> . Cada objeto de la matriz debe tener las mismas claves. No pude usar los feelings ya que ninguna de esas matrices está definida todavía, así que usé una matriz arbitraria que consta de objetos con claves idénticas.
Los detalles se comentan en el ejemplo a continuación.
/** * Input data must be an array of objects. * Each object must have the same set of keys, */ const data = [ { User: 'adurrant0', Email: 'barchdeckne0@reference.com', IPv4: '87.225.51.29', Log: '1634952921000', }, { User: 'schatelet1', Email: 'adiggell1@kickstarter.com', IPv4: '144.187.55.254', Log: '1588558039000', }, { User: 'ccocci2', Email: 'rmanger2@berkeley.edu', IPv4: '146.114.241.130', Log: '1626340081000', }, { User: 'amulvin3', Email: 'rswaffield3@163.com', IPv4: '135.6.104.158', Log: '1641816474000', }, { User: 'mthorley4', Email: 'czanolli4@a8.net', IPv4: '77.196.2.132', Log: '1639022902000', }, { User: 'aluciano5', Email: 'hturfin5@squidoo.com', IPv4: '95.92.150.36', Log: '1627573711000', }, { User: 'wallan6', Email: 'mseegar6@bloomberg.com', IPv4: '116.74.157.114', Log: '1636129472000', }, { User: 'temloch7', Email: 'abilton7@smh.com.au', IPv4: '97.215.247.56', Log: '1641316862000', }, { User: 'nspuner8', Email: 'pladd8@wordpress.com', IPv4: '231.37.19.22', Log: '1618192850000', }, { User: 'xgwillim9', Email: 'rcisson9@moonfruit.com', IPv4: '100.150.5.236', Log: '1600825215000', } ]; // Reference the static element to add the table to const main = document.querySelector('main'); // Pass in the DOM Object (node) and Object Array (objArray) const genTable = (node, objArray) => { // htmlString to render const base = `<table><tbody></tbody></table>`; // Render htmlString to node node.insertAdjacentHTML('beforeEnd', base); // Reference the table const table = document.querySelector('table'); // Reference the tBody const tB = table.tBodies[0]; // Get an array of keys from the first object of array const headers = Object.keys(objArray[0]); // Create and add a thead const tH = table.createTHead(); // Add a tr to thead const hRow = tH.insertRow(); // For each key add a th with the key as it's content headers.forEach((hdr) => (hRow.insertCell().outerHTML = `<th>${hdr}</th>`)); // For each object of array... objArray.forEach((obj) => { // Add a tr to tbody... let row = tB.insertRow(); // Get an array of current objects values let rowData = Object.values(obj); // Add a td for each value rowData.forEach((data) => (row.insertCell().textContent = data)); }); }; genTable(main, data); <main></main>