Question

我为此苦苦挣扎。我正在为使用JavaScript的Google Ads MCC帐户编写脚本。简而言之，我有一个包含对象数组的对象，我必须打印它。所以问题是我如何遍历此。注意：代码只能是纯JavaScript，不能是第三方库。

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.keys()，Object.values()和Object.entries()将此对象转换为数组，但这些方法无法使用。我也在下面尝试过，但是它只会返回如下对象的键数组，

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

预期的输出：我想遍历此对象以将其打印在html表中；像这样

以此类推...

Answer 1

Object.values为您提供了一个数组数组。使用.flat将其转换为一维数组。然后，您可以正常迭代所有值。

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

您可以使用：

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

遍历数据对象，并让forEach遍历数据对象内部的数组

Answer 3

您可以使用Object.entries遍历对象的所有键值对，并使用Array#forEach遍历值。

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

我的方法：

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

如何遍历包含数组的对象？

4 个答案: