I have a couple of objects and when I add them to the innerHTML I wish to encompass each object with a 'div' element. So 'feelings' would be encompassed with a set of 'div' elements and 'feelings2' would be encompassed in it's own set of 'div' elements. Can anyone help me?
This below is the HTML that is referenced in the javascript code
<div class="tables">
<table >
<tbody class="row" id="tableData"></tbody>
</table>
These 2 are the object sample.
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
}
];
This is the javascript that adds the objects data to the innerHTML
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;
The example below features a function that will accept a DOM Object and an Array of Objects and render a HTML table with the keys as <th> and all of the values in <td>. Each object of the array must have the same keys. Couldn't use feelings since none of those arrays are defined yet -- so I used an arbitrary array consisting of objects with identical keys.
Details are commented in example below
/**
* 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>