javascript将后端JSON数据格式化为table需要的数据结构（依赖对象中不存在同名属性的特性）

小剧情

后端只给提供必要的数据结构，理由是性能高。如果想在页面table中顺利展示，我势必需要重新对数据进行加工。

对于一个功能的开发，到底是属于后端处理还是前端处理并没有清晰地界限，开心就好。

后端不处理，那就我来，有时候成长机会就是这样白白捡来的。这一遭走下来，才领略到对象的美，且是那种只可意会不可言传的内在美。

核心依赖：对象的属性不存在相同的名字，且属性名可以是包含空字符串在内的任意字符串。

界面展示

部分数据模型示例

数据模型篇幅过长，这里只展示其中部分，具体的可以在片尾的源码进行下载。可以根据实际情况换成接口返回的数据。

{
    "总裁办": [{  //部门名称
        "code": 1115501,
        "costName": "社保",  //成本费用名称
        "cost": 16336.61  //成本费用金额
    }],
    "财务部": [{
        "code": 1116624,
        "costName": "分成款",
        "cost": 1200.50
    }],
    "成本列表": [{
        "code": 0,
        "costName": "分成款"  //成本费用名称
    },{
        "code": 2,
        "costName": "社保"
    }]
}

成本列表：该数组中为所有部门参与的成本。

思路

1、表头：成本费用名称是写死的。部门01…部门n是通过数据模型 “成本列表” 属性获取的动态数据。表头的每项都有一个唯一的标识。

2、唯一数据列：每个表格必定会有唯一数据项列，上边表格界面中，唯一数据列是成本费用名称。可以理解为每行数据的成本费用名称是不会重复的。

3、行数据对象：每行数据以对象的形式进行存储。属性名是成本费用名称，属性值是成本费用对应表头相关数据的键值对。

JS代码

说明：示例中使用的antd的table，表格数据项结构是按照它的要求建的。

/**格式化表格数据 */
    formateTableDataFn(list){
      let _this = this;
      //表头
      let columns = [
          {
              key:`costTitle`,
              title:<span>成本费用名称</span>,
              dataIndex:'costTitle'
          }
      ];
      let keysArr = Object.keys(list);  //返回数据中部门key
      for( let agencyName of keysArr){

        if(agencyName==='成本列表'){  //跳过成本列表
          continue;
        }
        columns.push({
            key:`${agencyName}`,
            title:<span>{agencyName}</span>,
            dataIndex:agencyName,
        })
      }
    
      //表体
      let leftCostNameArr = list['成本列表'];
      let tableDataObj = {};
      let tableDataArr = [];

      leftCostNameArr.map((item)=>{
        let {costName} = item;

        tableDataObj[costName] = {
            key:costName,
            costTitle:costName
        }

        //防止对象的key名如果为数字时会自行排序
        tableDataArr.push(tableDataObj[costName]);

    })
      
      //数据对象格式化
      for(let allKey in list){


        list[allKey].map((item)=>{
          let { costName,cost} = item;

          let theEle = <span>{cost}</span>;
          //引用类型特点：引用类型赋给变量，只是将指向该值的指针赋给了变量，所以无论哪个变量对引用类型的值进行改动，都会影响所有相关变量。
          //这里更改对象对应的属性，存储到数组中的对象也会相应的改变。
          //这里借助的是对象的costName属性名不存在同名，在遍历list[allKey]时，将costName属性对应值的结构补充完成
          tableDataObj[costName][allKey] = theEle;

        })

      }
     
    }

完整代码

点击下载