How to iterate through an object containing arrays?

Question

I am struggling a lot with this. I am writing a script for my Google Ads MCC account which uses JavaScript. in short i have this object which contains arrays of objects and i have to print it. So the question is that how do i Iterate through this. Note: Code should only be pure JavaScript no third party libraries.

var data = {
Peoples     : [{thisMonthImpr:1450, thisConversionValue:0.0, name:"Peoples", thisMonthClicks:17}],
Noor        : [{thisMonthImpr:154706, thisConversionValue:0.0, name:"Noor", thisMonthClicks:176}, {thisMonthImpr:234286, thisConversionValue:0.0, name:"Noor", thisMonthClicks:1217}], 
HIHFAD      : [{thisMonthImpr:126, thisConversionValue:0.0, name:"HIHFAD", thisMonthClicks:0}, {thisMonthImpr:39795, thisConversionValue:0.0, name:"HIHFAD", thisMonthClicks:104}], 
AlAnsari    : [{thisMonthImpr:57724, thisConversionValue:0.0, name:"AlAnsari", thisMonthClicks:57}, {thisMonthImpr:100374, thisConversionValue:0.0, name:"AlAnsari", thisMonthClicks:538}, {thisMonthImpr:12183, thisConversionValue:0.0, name:"AlAnsari", thisMonthClicks:99}], 
Aryana      : [{thisMonthImpr:116294, thisConversionValue:0.0, name:"Aryana", thisMonthClicks:467}, {thisMonthImpr:20940, thisConversionValue:0.0, name:"Aryana", thisMonthClicks:24}],
Hhugs       : [{thisMonthImpr:88, thisConversionValue:0.0, name:"Hhugs", thisMonthClicks:0}, {thisMonthImpr:0, thisConversionValue:0.0, name:"Hhugs", thisMonthClicks:0}], 
Hihfad      : [{thisMonthImpr:24378, thisConversionValue:0.0, name:"Hihfad", thisMonthClicks:222}, {thisMonthImpr:20841, thisConversionValue:0.0, name:"Hihfad", thisMonthClicks:197}], 
GLM         : [{thisMonthImpr:175, thisConversionValue:0.0, name:"GLM", thisMonthClicks:0}, {thisMonthImpr:51909, thisConversionValue:0.0, name:"GLM", thisMonthClicks:465}], 
Ummah       : [{thisMonthImpr:45219, thisConversionValue:5.0, name:"Ummah", thisMonthClicks:13635}, {thisMonthImpr:141961, thisConversionValue:0.0, name:"Ummah", thisMonthClicks:933}, {thisMonthImpr:17745, thisConversionValue:0.0, name:"Ummah", thisMonthClicks:165}]
}

I have also tried to convert this object to array using Object.keys() , Object.values() and Object.entries() but these methods wont work with it. also i have tried below but it will only return array of Keys of the objects like below,

[Hhugs, Hihfad, People's, Ummah, Noor, Al-Ansari, Aryana, GLM, HIHFAD]

Expected Output : I Want iterate through this object to print this in html table; like so

and so on......

Answer 1

Object.values gives you an array of arrays. Use .flat to turn this into a 1D array. Then you can iterate over all the values normally.

 var data = { Peoples: [{ thisMonthImpr: 1450, thisConversionValue: 0.0, name: "Peoples", thisMonthClicks: 17 }], Noor: [{ thisMonthImpr: 154706, thisConversionValue: 0.0, name: "Noor", thisMonthClicks: 176 }, { thisMonthImpr: 234286, thisConversionValue: 0.0, name: "Noor", thisMonthClicks: 1217 }], HIHFAD: [{ thisMonthImpr: 126, thisConversionValue: 0.0, name: "HIHFAD", thisMonthClicks: 0 }, { thisMonthImpr: 39795, thisConversionValue: 0.0, name: "HIHFAD", thisMonthClicks: 104 }], AlAnsari: [{ thisMonthImpr: 57724, thisConversionValue: 0.0, name: "AlAnsari", thisMonthClicks: 57 }, { thisMonthImpr: 100374, thisConversionValue: 0.0, name: "AlAnsari", thisMonthClicks: 538 }, { thisMonthImpr: 12183, thisConversionValue: 0.0, name: "AlAnsari", thisMonthClicks: 99 }], Aryana: [{ thisMonthImpr: 116294, thisConversionValue: 0.0, name: "Aryana", thisMonthClicks: 467 }, { thisMonthImpr: 20940, thisConversionValue: 0.0, name: "Aryana", thisMonthClicks: 24 }], Hhugs: [{ thisMonthImpr: 88, thisConversionValue: 0.0, name: "Hhugs", thisMonthClicks: 0 }, { thisMonthImpr: 0, thisConversionValue: 0.0, name: "Hhugs", thisMonthClicks: 0 }], Hihfad: [{ thisMonthImpr: 24378, thisConversionValue: 0.0, name: "Hihfad", thisMonthClicks: 222 }, { thisMonthImpr: 20841, thisConversionValue: 0.0, name: "Hihfad", thisMonthClicks: 197 }], GLM: [{ thisMonthImpr: 175, thisConversionValue: 0.0, name: "GLM", thisMonthClicks: 0 }, { thisMonthImpr: 51909, thisConversionValue: 0.0, name: "GLM", thisMonthClicks: 465 }], Ummah: [{ thisMonthImpr: 45219, thisConversionValue: 5.0, name: "Ummah", thisMonthClicks: 13635 }, { thisMonthImpr: 141961, thisConversionValue: 0.0, name: "Ummah", thisMonthClicks: 933 }, { thisMonthImpr: 17745, thisConversionValue: 0.0, name: "Ummah", thisMonthClicks: 165 }] } Object.values(data).flat().forEach(datum => console.log(datum));

Answer 2

You can use:

Object.keys(data).forEach(key => data[key].forEach(item => item.thisMonthImpr));

To iterate through the data object, and forEach to iterate through the array inside the data object

Answer 3

You can use Object.entries to loop over all the key-value pairs of the object and use Array#forEach to loop over the values.

 var data = { Peoples: [{thisMonthImpr:1450, thisConversionValue:0.0, name:"Peoples", thisMonthClicks:17}], Noor: [{thisMonthImpr:154706, thisConversionValue:0.0, name:"Noor", thisMonthClicks:176}, {thisMonthImpr:234286, thisConversionValue:0.0, name:"Noor", thisMonthClicks:1217}], HIHFAD: [{thisMonthImpr:126, thisConversionValue:0.0, name:"HIHFAD", thisMonthClicks:0}, {thisMonthImpr:39795, thisConversionValue:0.0, name:"HIHFAD", thisMonthClicks:104}], AlAnsari: [{thisMonthImpr:57724, thisConversionValue:0.0, name:"AlAnsari", thisMonthClicks:57}, {thisMonthImpr:100374, thisConversionValue:0.0, name:"AlAnsari", thisMonthClicks:538}, {thisMonthImpr:12183, thisConversionValue:0.0, name:"AlAnsari", thisMonthClicks:99}], Aryana: [{thisMonthImpr:116294, thisConversionValue:0.0, name:"Aryana", thisMonthClicks:467}, {thisMonthImpr:20940, thisConversionValue:0.0, name:"Aryana", thisMonthClicks:24}], Hhugs: [{thisMonthImpr:88, thisConversionValue:0.0, name:"Hhugs", thisMonthClicks:0}, {thisMonthImpr:0, thisConversionValue:0.0, name:"Hhugs", thisMonthClicks:0}], Hihfad: [{thisMonthImpr:24378, thisConversionValue:0.0, name:"Hihfad", thisMonthClicks:222}, {thisMonthImpr:20841, thisConversionValue:0.0, name:"Hihfad", thisMonthClicks:197}], GLM: [{thisMonthImpr:175, thisConversionValue:0.0, name:"GLM", thisMonthClicks:0}, {thisMonthImpr:51909, thisConversionValue:0.0, name:"GLM", thisMonthClicks:465}], Ummah: [{thisMonthImpr:45219, thisConversionValue:5.0, name:"Ummah", thisMonthClicks:13635}, {thisMonthImpr:141961, thisConversionValue:0.0, name:"Ummah", thisMonthClicks:933}, {thisMonthImpr:17745, thisConversionValue:0.0, name:"Ummah", thisMonthClicks:165}] }; const container = document.querySelector("#container"); const tableHead = `<tr><th>This Month Impr</th><th>This Month Clicks</th><th>This Month Conv Value</th></tr>`; Object.entries(data).forEach(([label,values])=>{ const title = document.createElement('h1'); const table = document.createElement('table'); title.textContent = label; table.innerHTML = tableHead; values.forEach(({thisMonthImpr,thisConversionValue,thisMonthClicks})=>{ const row = document.createElement('tr'); const tds = Array.from({length:3},()=>document.createElement('td')); tds[0].textContent = thisMonthImpr; tds[1].textContent = thisConversionValue; tds[2].textContent = thisMonthClicks; tds.forEach(td=>row.appendChild(td)); table.appendChild(row); }); container.appendChild(title); container.appendChild(table); });

 table { border-collapse: collapse; } table, th, td { border: 1px solid black; } td { padding: 10px; }

 <div id="container"></div>

Answer 4

My approach:

 const data = { Peoples: [{ thisMonthImpr: 1450, thisConversionValue: 0.0, name: "Peoples", thisMonthClicks: 17 }], Noor: [{ thisMonthImpr: 154706, thisConversionValue: 0.0, name: "Noor", thisMonthClicks: 176 }, { thisMonthImpr: 234286, thisConversionValue: 0.0, name: "Noor", thisMonthClicks: 1217 }], HIHFAD: [{ thisMonthImpr: 126, thisConversionValue: 0.0, name: "HIHFAD", thisMonthClicks: 0 }, { thisMonthImpr: 39795, thisConversionValue: 0.0, name: "HIHFAD", thisMonthClicks: 104 }], AlAnsari: [{ thisMonthImpr: 57724, thisConversionValue: 0.0, name: "AlAnsari", thisMonthClicks: 57 }, { thisMonthImpr: 100374, thisConversionValue: 0.0, name: "AlAnsari", thisMonthClicks: 538 }, { thisMonthImpr: 12183, thisConversionValue: 0.0, name: "AlAnsari", thisMonthClicks: 99 }], Aryana: [{ thisMonthImpr: 116294, thisConversionValue: 0.0, name: "Aryana", thisMonthClicks: 467 }, { thisMonthImpr: 20940, thisConversionValue: 0.0, name: "Aryana", thisMonthClicks: 24 }], Hhugs: [{ thisMonthImpr: 88, thisConversionValue: 0.0, name: "Hhugs", thisMonthClicks: 0 }, { thisMonthImpr: 0, thisConversionValue: 0.0, name: "Hhugs", thisMonthClicks: 0 }], Hihfad: [{ thisMonthImpr: 24378, thisConversionValue: 0.0, name: "Hihfad", thisMonthClicks: 222 }, { thisMonthImpr: 20841, thisConversionValue: 0.0, name: "Hihfad", thisMonthClicks: 197 }], GLM: [{ thisMonthImpr: 175, thisConversionValue: 0.0, name: "GLM", thisMonthClicks: 0 }, { thisMonthImpr: 51909, thisConversionValue: 0.0, name: "GLM", thisMonthClicks: 465 }], Ummah: [{ thisMonthImpr: 45219, thisConversionValue: 5.0, name: "Ummah", thisMonthClicks: 13635 }, { thisMonthImpr: 141961, thisConversionValue: 0.0, name: "Ummah", thisMonthClicks: 933 }, { thisMonthImpr: 17745, thisConversionValue: 0.0, name: "Ummah", thisMonthClicks: 165 }] } for (const entry of Object.values(data)) { createTable(entry); } function createTable(entry) { const table = document.createElement('table'); const heading = createHeading(); table.appendChild(heading); for (const row of entry) { const tr = createRow(row); table.appendChild(tr); } document.body.appendChild(table); } function createHeading() { const tr = document.createElement('tr'); const th1 = document.createElement('th'); const th2 = document.createElement('th'); const th3 = document.createElement('th'); const text1 = document.createTextNode("This Month Impr"); const text2 = document.createTextNode("This Month Clicks"); const text3 = document.createTextNode("This Month Conv Value"); th1.appendChild(text1); th2.appendChild(text2); th3.appendChild(text3); tr.appendChild(th1); tr.appendChild(th2); tr.appendChild(th3); return tr; } function createRow(row) { const tr = document.createElement('tr'); const td1 = document.createElement('td'); const td2 = document.createElement('td'); const td3 = document.createElement('td'); const text1 = document.createTextNode(row.thisMonthImpr); const text2 = document.createTextNode(row.thisMonthClicks); const text3 = document.createTextNode(row.thisConversionValue); td1.appendChild(text1); td2.appendChild(text2); td3.appendChild(text3); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); return tr; }

 h1, h2 { font-family: Lato; } table { border-collapse: collapse; } table, th, td { border: 1px solid black; } table { margin-top: 50px; table-layout: fixed; width: 400px; }