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......

i want to show these in html table. let me update the question how. — Hamza Saeed
– Hamza Saeed, Commented Jul 27, 2020 at 15:13
But an array of keys is all you need to get to the data, and Object.entries(data)[0][1] for instance is the first array. — user5734311
– user5734311, Commented Jul 27, 2020 at 15:15

Unmitigated · Accepted Answer · 2020-07-27 15:42:02Z

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>

thank you very much for your answer but thats now how HTML Tables work in Google Ads Scripts. thanks again
@HamzaSaeed What do you mean? I've given an example of how to iterate over the array values.

GirkovArpa · Accepted Answer · 2020-07-27 15:17:37Z

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

thank you for your answer but that where i have come from, the output your code is giving was i had in first place then i had to group this objects by the value of "name". that is when i got my object. now i want to show the data in html table

Animal · Accepted Answer · 2020-07-27 16:03:55Z

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

Laiso · Accepted Answer · 2020-07-27 16:16:43Z

1

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

edited Jul 27, 2020 at 16:16

Laiso

2,6503 gold badges19 silver badges33 bronze badges

answered Jul 27, 2020 at 15:41

Manish Kumar

213 bronze badges

1 Comment

Hamza Saeed Over a year ago

thank you very much i only needed this for ( var key in sorted ){ Logger.log(sorted[key]); }

Collectives™ on Stack Overflow

How to iterate through an object containing arrays?

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Related