如何在React中从JSON创建动态表头?

时间:2018-09-04 07:31:20

标签: javascript json reactjs

我有一个对象的JSON数组,我想在React中基于它创建一个动态表列/标题。

数据:

example = [
  {
    id: 0,
    city: 'New York',
  },
  {
    id: 1,
    city: 'Paris',
  },
]

我想遍历数组,获取键并添加额外的字段。 到目前为止,我有:

columns() {
    return Object.keys(Example[0]).map((key) => {
      return {
        cityName: key,
        capital: false,
      };
    });
  }

我得到了键,但是它们是无序的(随机的),并且多余的字段已添加到所有对象中。我想获取每个键以将其用作表头(列名),并能够为每个对象更改capital。 我该如何在React中做到这一点?

2 个答案:

答案 0 :(得分:1)

您可以为此使用Array.map。

example = [
  {
    id: 0,
    city: 'New York',
  },
  {
    id: 1,
    city: 'Paris',
  },
];
example.map((obj) => {
  return {
   CITY : obj.city,
   ID : obj.id
   // Do whatever with the objects
 }
})

答案 1 :(得分:0)

arr => arr && arr[0] ? object.keys(arr[0]) : [];

确保数组中的所有项目都具有相同的键