如何将嵌套数组数据转换为Angular中ngxCsv可接受的格式？

问题背景 #

从API接收到嵌套数组格式的数据（每个外层元素是包含单个对象的子数组），需要转换为普通对象数组，才能作为Angular中ngxCsv()方法的有效输入。此前尝试用正则处理未成功，现寻求可靠实现方案。

API返回的原始数据格式 #

data = [  
        [
        {
          ColA : "Val1",
          ColB : "Val2",
          ColC : "Val3",
          ColD : ("2019-08-19T06:38:28.990+0000"),  
        }
        ],

        [
        {
          ColA : "Val11",
          ColB : "Val21",
          ColC : "Val31",
          ColD : ("2019-08-19T06:38:28.990+0000"),          
        }
        ],
    
        [
        {
          ColA : "Val12",
          ColB : "Val22",
          ColC : "Val32",
          ColD : ("2019-08-19T06:38:28.990+0000"),          
        }
        ]
];

期望转换后的格式 #

data = [
        {
          ColA : "Val1",
          ColB : "Val2",
          ColC : "Val3",
          ColD : ("2019-08-19T06:38:28.990+0000"),          
        },     
          
        {
          ColA : "Val11",
          ColB : "Val21",
          ColC : "Val31",
          ColD : ("2019-08-19T06:38:28.990+0000"),          
        },
             
        {
          ColA : "Val12",
          ColB : "Val22",
          ColC : "Val32",
          ColD : ("2019-08-19T06:38:28.990+0000"),          
        }
];

此前尝试的错误代码 #

正则处理Pipe

export class specialPipe implements PipeTransform{
  transform(data: any) {
    let newValue = data.replace(/[ ], ];/g, "");
    return newValue;
  }
}

导出CSV的函数

exportCSVTS(){
  var foo:specialPipe = new specialPipe();
  var newData = foo.transform(this.data);
  let ArrayData: Array<string> = newData;

  var options = {
    title: "CSV File",
    fieldSeparator: ",",
    quoteStrings: '"',
    decimalseparator: ".",
    showLabels: false,
    showTitle: false,
    useBom: false,
    headers: ['ColA','ColB', 'ColC', 'ColD']
  }

  new ngxCsv(ArrayData , "CSV File", options);
}

注：若数据为期望格式，ngxCsv可正常导出正确的CSV文件。

正确实现方案 #

方案1：使用map方法提取内层对象 #

正则适合处理字符串，这里直接操作数组对象更高效可靠。遍历外层数组，取出每个子数组的第一个元素即可：

改造Pipe（复用性高）

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'flattenNestedArray'})
export class FlattenNestedArrayPipe implements PipeTransform{
  transform(data: Array<Array<any>>): Array<any> {
    // 过滤空数组避免报错
    return data.filter(subArr => subArr && subArr.length > 0).map(subArr => subArr[0]);
  }
}

修改导出函数

exportCSVTS(){
  // 直接在函数内处理（或使用上述Pipe转换）
  const flattenedData = this.data.filter(subArr => subArr && subArr.length > 0).map(subArr => subArr[0]);

  const options = {
    title: "CSV File",
    fieldSeparator: ",",
    quoteStrings: '"',
    decimalseparator: ".",
    showLabels: false,
    showTitle: false,
    useBom: false,
    headers: ['ColA','ColB', 'ColC', 'ColD']
  };

  new ngxCsv(flattenedData, "CSV File", options);
}

方案2：使用flat()方法（更简洁） #

若环境支持ES2019及以上，可直接用flat()方法（默认深度1，适配一层嵌套）：

exportCSVTS(){
  // 过滤空数组后扁平化
  const flattenedData = this.data.filter(subArr => subArr.length > 0).flat();

  const options = {
    title: "CSV File",
    fieldSeparator: ",",
    quoteStrings: '"',
    decimalseparator: ".",
    showLabels: false,
    showTitle: false,
    useBom: false,
    headers: ['ColA','ColB', 'ColC', 'ColD']
  };

  new ngxCsv(flattenedData, "CSV File", options);
}

原正则方法失效原因 #

replace()是字符串方法，传入数组时会被自动转为字符串（如"[object Object],[object Object]"），处理后得到的是字符串而非ngxCsv需要的对象数组，因此无法正常导出。

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