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

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

2 个答案: