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

Question

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

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

我的问题是：如何将 Tests 对象作为单独的列查看 - TestName 将是列名，TestResult 将是单元格数据？

我的表格应该如下所示：

请问有什么好办法吗？

Answer 1

@用户。我有一个动态列标题的演示。

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

Answer 2

您可以尝试将对象内部的数组转换为直接对象属性，以便它们可以由 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 这样的极端情况，多个字段可能相同，这将覆盖以前的值。