查看 ag-grid 数据中的对象列表 table

Question

我正在使用 ag-grid。这是我的 rowData 对象：

{  
 "Name" : "aaa",
 "Family" : "ds"
 "Age" : "16",
 "Tests" : [ 
    {
        "TestName" : "bb",
        "TestResult" : "1234"
    }, 
    {
        "TestName" : "aa",
        "TestResult" : "4322"
    }
 ]
}

我的问题是：如何将 Tests 对象视为单独的列 - TestName 将是列名称，TestResult会是单元格数据吗?

我的 table 应该如下所示：

请问有什么想法吗？

Answer 1

您可以尝试将对象内的数组转换为直接对象属性，以便 ag-grid 可以将它们呈现为列名称和值。

const data = {  
"Name" : "aaa",
"Family" : "ds",
"Age" : "16",
"Tests" : [ 
    {
        "TestName" : "bb",
        "TestResult" : "1234"
    }, 
    {
        "TestName" : "aa",
        "TestResult" : "4322"
    }
]
}
const newData = {...data};

for (const [key, value] of Object.entries(newData['Tests'])) {
    newData[value['TestName']] = value['TestResult']
}
delete(newData.Tests);

newData 应该包含数组数据作为应该解决问题的对象的一部分。

{ Name: 'aaa', Family: 'ds', Age: '16', bb: '1234', aa: '4322' }

这只是一个示例，可能存在一些边缘情况，例如多个字段的 TestName 可能相同，这将覆盖以前的值。

Answer 2

@用户。我有一个动态列 headers.

的演示

var data = { Name: 'aaa', Family: 'ds', Age: '16', bb: '1234', aa: '4322' };
for(key in data){
  if(gridOptions.columnApi.getColumn(key)!= null){
    desktopDefaultCols.push({
                                             headerName: key,
                                             field: key,
                                           });
  }
}

查看 ag-grid 数据中的对象列表 table

View list of object in ag-grid data table

vue.js

ag-grid