CSV导入DataTable后异步API错误的行级展示实现问题

场景说明 #

• 已将CSV导入DataTable，点击按钮后通过异步函数逐行向REST API发送数据，请求载荷示例：

var b = [
    {
        "LastName": "LastName02",
        "Email": "FN02.LN02@gmail.com",
        "MobilePhone": "9198842"
    },
    {
        "LastName": "LastName03",
        "Email": "FN03.LN03@gmail.com",
        "MobilePhone": "+91 9884299071"
    },
]

• API返回每条记录的错误详情，示例：
  第一条记录错误：

  resp.detailErrors = [
      {
        "errorCode": 7002,
        "field": "communicationNumbers.number",
        "value": "98842",
        "message": "For country India, Mobile length must be exactly 10 numeric digits, cannot start with zero."
      },
      {
        "errorCode": 7002,
        "field": "primaryEmailId",
        "value": "FN02.LN02@gmail.com",
        "message": "Invalid Primary Email Address"
      },
      {
        "errorCode": 7002,
        "field": "primaryEmailId",
        "value": "FN02.LN02@gmail.com",
        "message": "Invalid Primary Email Address"
      }
    ]
  

  第二条记录错误：

  [
      {
          "errorCode": 7002,
          "field": "primaryEmailId",
          "value": "FN03.LN03@gmail.com",
          "message": "Invalid Primary Email Address"
      },
      {
          "errorCode": 7002,
          "field": "primaryEmailId",
          "value": "FN03.LN03@gmail.com",
          "message": "Invalid Primary Email Address"
      }
  ]
  

• 目标格式（DataTable keyField为Email，需按行展示错误）：

let errors = { rows: {}}

errors.rows['FN02.LN02@gmail.com'] = {
    title: 'error',
    messages: ['invalid email', 'invalid phone'],
    fieldNames: ['Email', 'MobilePhone']
};

errors.rows['FN03.LN03@gmail.com'] = {
    title: 'error',
    messages: ['invalid email'],
    fieldNames: ['Email']
};

尝试的代码（未实现需求） #

let map = [];
let errors = { rows: {} }
var key = '';

var resp = {"detailedErrors":[{"errorCode":7002,"field":"contactEntity.communicationNumbers.number","value":"98842","message":"For country India, Mobile length must be exactly 10 numeric digits, cannot start with zero."},{"errorCode":7002,"field":"primaryEmailId","value":"FN02.LN02@gmail.com","message":"Invalid Primary Email Address"},{"errorCode":7002,"field":"primaryEmailId","value":"FN02.LN02@gmail.com","message":"Invalid Primary Email Address"}],"correlationIdentifier":"df3df8e876bce7357fcc84ccd36a76f1"}

resp.detailedErrors.forEach(res=>{
    key = res.Email 
    if(res.value.includes('@')) {
       map.push({
         key:res.value,
         val:res.message
       });
    } else {
      console.log(res)
      if(key == undefined) {
      
        map.push({
         key:key,
         val:res.message
       });
      }
    }
}) 
console.log(map)

解决方案代码 #

// 原始请求数据（用于匹配非邮箱错误对应的行Email）
const requestData = [
    {
        "LastName": "LastName02",
        "Email": "FN02.LN02@gmail.com",
        "MobilePhone": "9198842"
    },
    {
        "LastName": "LastName03",
        "Email": "FN03.LN03@gmail.com",
        "MobilePhone": "+91 9884299071"
    }
];

// API返回的错误响应
const resp = {"detailedErrors":[{"errorCode":7002,"field":"contactEntity.communicationNumbers.number","value":"98842","message":"For country India, Mobile length must be exactly 10 numeric digits, cannot start with zero."},{"errorCode":7002,"field":"primaryEmailId","value":"FN02.LN02@gmail.com","message":"Invalid Primary Email Address"},{"errorCode":7002,"field":"primaryEmailId","value":"FN02.LN02@gmail.com","message":"Invalid Primary Email Address"}],"correlationIdentifier":"df3df8e876bce7357fcc84ccd36a76f1"};

// 初始化目标错误格式
const errors = { rows: {} };

// 建立手机号到对应Email的映射（处理格式统一）
const phoneToEmailMap = requestData.reduce((map, row) => {
    const cleanPhone = row.MobilePhone.replace(/[^0-9]/g, '');
    map[cleanPhone] = row.Email;
    return map;
}, {});

// 遍历处理每个错误项
resp.detailedErrors.forEach(error => {
    let rowKey;
    let fieldName;
    let message;

    // 根据错误字段类型匹配对应行和字段
    if (error.field.includes('primaryEmailId')) {
        rowKey = error.value;
        fieldName = 'Email';
        message = 'invalid email';
    } else if (error.field.includes('communicationNumbers.number')) {
        rowKey = phoneToEmailMap[error.value];
        fieldName = 'MobilePhone';
        message = 'invalid phone';
    }

    // 初始化或更新行错误信息，避免重复
    if (rowKey) {
        if (!errors.rows[rowKey]) {
            errors.rows[rowKey] = {
                title: 'error',
                messages: [],
                fieldNames: []
            };
        }
        if (!errors.rows[rowKey].messages.includes(message)) {
            errors.rows[rowKey].messages.push(message);
            errors.rows[rowKey].fieldNames.push(fieldName);
        }
    }
});

console.log(errors);

关键说明 #

1. 手机号-Email映射：API返回的手机号错误中没有直接关联Email，所以用原始请求数据建立映射，通过错误中的手机号值匹配对应行的Email。
2. 错误分类匹配：根据错误的field字段判断是邮箱还是手机号错误，对应到DataTable的Email和MobilePhone字段。
3. 去重处理：过滤重复的错误信息，确保每个行的错误列表中只保留唯一项。

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