如何提取由新键添加到键的嵌套格式相同的嵌套对象的键

时间:2018-08-30 20:44:21

标签: javascript reactjs react-table

我正在使用react table,在其中我需要提供api数据密钥,并添加了新的密钥Header以创建React Table Head(TH> TD);

下面是从API获取的示例数据,我需要将对象键传递给表头,将对象键传递给表体。表头需要保留通用键。

To Achieve this

我的数据样本:

{
  'data':
    {
        'id': 486897532,
        'active': null,
        'acc_info': [
        {
          'acc_name': 'saving',
          'bank_info': [
            {
              'bank_name': 'ABC',
              'bank_address': 'address',
            },
            {
              'bank_name': 'DEF',
              'bank_address': 'address',
            }]
        },
        {
            'acc_name': 'FXE',
            'bank_info': [
            {
                'bank_name': 'ABC',
                'bank_address': 'address',
            },
            {
                'bank_name': 'DEF',
                'bank_address': 'address',
            }]
        },
      ],
    },
    {
        'id': 56465945,
        'active': null,
        'acc_info': [
        {
          'acc_name': 'current',
          'bank_info': [
            {
              'bank_name': 'ABC',
              'bank_address': 'address',
            },
            {
              'bank_name': 'DEF',
              'bank_address': 'address',
            }]
        },
        {
            'acc_name': 'FXE',
            'bank_info': [
            {
                'bank_name': 'ABC',
                'bank_address': 'address',
            },
            {
                'bank_name': 'DEF',
                'bank_address': 'address',
            }]
        },
      ],
    }
}

,预期结果应该是:

[
  {
    Header: "id"
  },
  {
    Header: "active"
  },
  {
    Header: "acc_info",
    columns: [
    {
       Header: "acc_name",
    },
    {
       Header: "bank_name",
    },
    {
       Header: "bank_address"
    }]
 }
]

1 个答案:

答案 0 :(得分:0)

问题已解决!

正在使用或不熟悉React Table的步骤如下:

用于表格标题

  1. React Table带有“ columns”道具,该道具期望带有 标头和访问器键。 TH标题的标题和访问器 访问关注表正文列
  2. 使用js Map或Ladash _.map获取期望值
  3. 使用'Header'和'accessor'键创建对象变量,并将数据映射为 值

干杯..