AngularJS/JavaScript如何重命名数组键名适配多格式Excel渲染

两个方案均可以实现，从工程可维护性角度优先选择方案2，具体说明如下：

方案1：模板内增加字段判断逻辑 #

• 可行性：完全可用。从你代码里的$scope判断你用的是AngularJS 1.x，模板表达式支持直接做属性真值判断，不需要加额外的方法就能实现兼容渲染。
• 参考实现代码：

<td scope="row">{{ai.AgendaItem || ai['Agenda #']}}</td>
<td>{{ai.LegistarID || ai['File #']}}</td>

• 存在的问题：数据适配逻辑耦合在视图模板里，后续如果新增第三种、第四种不同列名的Excel格式，你需要反复修改模板，判断逻辑会越堆越乱，排查问题的时候要同时看数据逻辑和模板逻辑，维护成本高。

方案2：数据层统一重命名字段做归一化 #

• 可行性：这是更合理的标准实现方案，推荐优先采用。这种处理方式符合前端分层逻辑：数据解析层负责把不同来源的异构数据转换成业务层、视图层统一使用的固定结构，视图层只负责渲染固定结构的数据，完全不需要感知上传文件的格式差异。
• 参考实现思路：你在解析完Excel内容、往$scope.AgendaItems数组赋值的环节直接做字段映射即可，不需要等数据全部存入数组后再二次遍历修改。比如识别到用户上传的是第二种格式的文件时，直接做字段转换：

// 第二种格式解析完成后做字段映射
$scope.AgendaItems = parsedRawData.map(item => {
  return {
    AgendaItem: item['Agenda #'],
    LegistarID: item['File #'],
    Title: item.Title
  }
})

如果是第一种格式的文件，直接按原有字段结构赋值即可。如果已经出现两种格式的数据混在同一个数组里的情况，也可以在数据存入数组后统一做一次遍历归一化，把所有非标字段名改成统一的标准字段名。

• 优势：后续不管新增多少种不同列名的Excel格式，你只需要在数据解析环节加对应的映射规则，模板代码不需要做任何修改，逻辑边界清晰，排查问题效率更高。

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