映射和对象填充对象 React.js/JS

Question

所以我有一个数组，其中包含一个对象，但该对象内部可能有 3 个或更多对象。 这几乎是我调用它的 api 的确切格式（长度有类似数字的原因是因为我在 api 调用中使用了参数。）：

[
  {
    0: {
      0: {
        num: 1,
        name: 'franklin',
      },
      1: {
        num: 58,
        name: 'harold',
      },
      8: {
        num: 9,
        name: 'eugene',
      },
      19: {
        num: 5,
        name: 'clive',
      },
    }
  }
]

我正在尝试遍历 0、1、8 和 19 中的每一个以从中提取数据并将它们显示在表格中。每次我尝试它只映射第一个，而不是其他 3 个。

我刚刚做了典型的：

myApi.map((people, i) => {
  let row = <tr>{people[i].num}</tr><tr>{people[i].name}</tr>
  tableRow.push(row);
}) 

，但就像我说的那样，它只显示第一条数据，而不显示其他 3。我哪里出错了？

Answer 1

您需要遍历数组中的对象。

myApi.map((people) => {
  for(var person in people) {
  let row = <tr>{people[person].num}</tr><tr>{people[person].name}</tr>
  tableRow.push(row);
 }
}) 

我相信是这样的。

Answer 2

map 在这种情况下并不合适，因为您只是在迭代并将对象推送到单独的数组中。另外，请注意，您发布的不是数组；它是一个对象。

要遍历对象的值，您可以使用Object.values 和一个简单的forEach：

let myApi = [{
  0: {
    0: {
      num: 1,
      name: 'franklin',
    },
    1: {
      num: 58,
      name: 'harold',
    },
    8: {
      num: 9,
      name: 'eugene',
    },
    19: {
      num: 5,
      name: 'clive',
    },
  },
  1: {
    20: {
      num: 6,
      name: 'bob',
    },
  }
}];

let tableRows = [];
Object.values(myApi[0]).forEach(collection => {
  Object.values(collection).forEach(person => {
    tableRows.push('Name is ' + person.name + '; num is ' + person.num);
  });
});

console.log(tableRows);