映射和对象填充对象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);