TypeScript从对象数组提取指定字段并适配ag-Grid数据源

需求描述 #

需要从结构如下的对象数组中，提取applicationNumber、applicationStatus、companyName、contactName、Address、City字段生成新数组，作为ag-Grid的数据源，要求在TypeScript中实现最高效的处理方式，处理位置在onGridReady方法的标注处。

原对象数组结构 #

[
  {
    applicationNumber:'227114',
    applicationStatus:0,
    dateCreated: "01-10-2010"
  },
  {
    companyInformationModel: {
      companyInformationId: '78fe1852-5a26-4624-925c-74653de9dad9',
      companyName: 'Company Test',
      contactName: 'Test Contact',
      primaryPhone: '123-234-2343',
      secondaryPhone: null
    },
    locationInformationModels: [
      {
        "Address": "123 Main St",
        "City": "My City"
      },
      {
        "Address": "123 Not Main St",
        "City": "Your City"
      }
    ]
  }
]

原代码片段 #

onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.assessmentService.getAssessment().subscribe(data =>{
      let assessment =   <-------------------------此处需解析数据
      this.assessmentData = assessment;
      const sortModel = [{colId: 'dateCreated', sort: 'desc'}];
      this.sortGrid(params, 'dateCreated', 'desc')
      this.gridApi.setRowData(this.assessmentData.slice(0, 10)); 
      params.api!.setRowData(this.assessmentData.slice(0, 10))
      this.loading = false; 
      console.log(this.assessmentData);
    });  
  }

高效实现方案 #

在TypeScript中，结合对象解构与原生数组方法map/flatMap是最高效的处理方式，既保证代码简洁性，又能利用TS类型检查确保数据结构安全。

1. 定义目标数据类型（TypeScript约束） #

先声明接口规范最终输出的数据结构，提升代码可读性与类型安全：

interface AssessmentGridData {
  applicationNumber?: string;
  applicationStatus?: number;
  companyName?: string;
  contactName?: string;
  Address?: string;
  City?: string;
}

2. 基础场景：每个条目取第一个地址 #

如果仅需每个数据对象对应第一个地址信息，使用map遍历原数组，解构提取所需字段：

let assessment: AssessmentGridData[] = data.map(item => {
  // 解构基础字段与嵌套字段，添加空对象默认值避免空指针报错
  const { 
    applicationNumber, 
    applicationStatus,
    companyInformationModel: { companyName, contactName } = {},
    locationInformationModels = []
  } = item;
  // 取第一个地址，无地址时设为undefined
  const firstLocation = locationInformationModels[0] || {};
  return {
    applicationNumber,
    applicationStatus,
    companyName,
    contactName,
    Address: firstLocation.Address,
    City: firstLocation.City
  };
});

3. 进阶场景：每个地址生成独立行 #

如果需要把每个地址都作为ag-Grid的单独行，用flatMap替代map，将多地址对象展开为独立条目：

let assessment: AssessmentGridData[] = data.flatMap(item => {
  const { 
    applicationNumber, 
    applicationStatus,
    companyInformationModel: { companyName, contactName } = {},
    locationInformationModels = []
  } = item;
  // 每个地址对应一行数据
  return locationInformationModels.map(location => ({
    applicationNumber,
    applicationStatus,
    companyName,
    contactName,
    Address: location.Address,
    City: location.City
  }));
});

完整替换后的onGridReady方法 #

interface AssessmentGridData {
  applicationNumber?: string;
  applicationStatus?: number;
  companyName?: string;
  contactName?: string;
  Address?: string;
  City?: string;
}

onGridReady(params: GridReadyEvent) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
  this.assessmentService.getAssessment().subscribe(data =>{
    // 此处替换为上述基础/进阶场景的处理代码
    let assessment: AssessmentGridData[] = data.map(item => {
      const { 
        applicationNumber, 
        applicationStatus,
        companyInformationModel: { companyName, contactName } = {},
        locationInformationModels = []
      } = item;
      const firstLocation = locationInformationModels[0] || {};
      return {
        applicationNumber,
        applicationStatus,
        companyName,
        contactName,
        Address: firstLocation.Address,
        City: firstLocation.City
      };
    });

    this.assessmentData = assessment;
    const sortModel = [{colId: 'dateCreated', sort: 'desc'}];
    this.sortGrid(params, 'dateCreated', 'desc');
    this.gridApi.setRowData(this.assessmentData.slice(0, 10)); 
    this.loading = false; 
    console.log(this.assessmentData);
  });  
}

关键优化点 #

• 使用对象解构直接提取嵌套字段，配合默认值避免空指针错误，比链式访问更简洁。
• 采用原生数组方法map/flatMap遍历处理，性能优于手动循环。
• 定义TypeScript接口约束目标数据结构，提升代码可读性与类型安全性。

内容的提问来源于stack exchange，提问作者CodeMan03