如何将对象数组转换为react-csv兼容的2D数组格式？

你代码的核心问题 #

• 未做多行拆分：单条错误记录对应多列（比如STAGE下第一条错误的columnsName有3个值）时，需要拆分出对应数量的行，而非把所有列值拼接在同一行
• 缺失留白逻辑：同一表名仅在该表分组的第一行显示，同一条错误消息仅在该错误项的第一行显示，其余行对应位置留空
• 没有手动添加表头行

修复后可直接运行的代码 #

const data = {
  "STAGE": [{
      "infoLevel": "error",
      "message": "Columns present in source config but not in the database.",
      "columns": [],
      "columnsName": [
        "TEST",
        "TEST1",
        "TEST2"
      ],
      "type": "String"
    },
    {
      "infoLevel": "error",
      "message": "Columns present in database but not in the source config.",
      "columns": [],
      "columnsName": [],
      "type": "String"
    },
    {
      "infoLevel": "error",
      "message": "Columns with datatype mismatch.",
      "columns": [{
        "name": "LAST_NAME",
        "configDatatype": "varchar(50)",
        "dbDatatype": "varchar(40)"
      }, {
        "name": "FIRST_NAME",
        "configDatatype": "varchar(50)",
        "dbDatatype": "varchar(40)"
      }],
      "columnsName": [],
      "type": "Table"
    }
  ],
  "RAW": [{
    "infoLevel": "success",
    "message": "Column sets are identical.",
    "columns": [],
    "columnsName": [],
    "type": "String"
  }],
  "LAST": [{
    "infoLevel": "success",
    "message": "Column sets are identical.",
    "columns": [],
    "columnsName": [],
    "type": "String"
  }],
  "HIST": [{
    "infoLevel": "success",
    "message": "Column sets are identical.",
    "columns": [],
    "columnsName": [],
    "type": "String"
  }],
  "CORE": [{
    "infoLevel": "success",
    "message": "Column sets are identical.",
    "columns": [],
    "columnsName": [],
    "type": "String"
  }],
  "ADDR": [{
    "infoLevel": "success",
    "message": "Column sets are identical.",
    "columns": [],
    "columnsName": [],
    "type": "String"
  }],
  "TRAN": [{
    "infoLevel": "success",
    "message": "Column sets are identical.",
    "columns": [],
    "columnsName": [],
    "type": "String"
  }],
  "CONFIG": [{
    "infoLevel": "success",
    "message": "Column sets are identical.",
    "columns": [],
    "columnsName": [],
    "type": "String"
  }],
  "ACTION": [{
    "infoLevel": "success",
    "message": "Column sets are identical.",
    "columns": [],
    "columnsName": [],
    "type": "String"
  }]
}

// 初始化表头
const result = [["Name", "Message", "Column", "configDataType","dbDataType"]]

Object.keys(data).forEach(tableName => {
  const tableErrors = data[tableName]
  let isFirstRowOfTable = true
  tableErrors.forEach(error => {
    let isFirstRowOfError = true
    // 计算当前错误需要生成的行数：优先取columns，其次columnsName，最少生成1行
    const rowItems = error.columns.length ? error.columns : (error.columnsName.length ? error.columnsName : [{}])
    rowItems.forEach(item => {
      const row = []
      // 表名仅在该分组第一行显示
      row.push(isFirstRowOfTable ? tableName : '')
      // 错误消息仅在该错误第一行显示
      row.push(isFirstRowOfError ? error.message : '')
      // 处理列名和数据类型
      if (typeof item === 'string') {
        row.push(item, '', '')
      } else {
        row.push(item.name || '', item.configDatatype || '', item.dbDatatype || '')
      }
      result.push(row)
      // 标记第一行已输出
      isFirstRowOfTable = false
      isFirstRowOfError = false
    })
  })
})

console.log(result)

运行代码输出的2D数组和你预期的格式完全一致，可直接传给react-csv使用。

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