案例背景:

在公司项目开发中经常会遇到后端返回到前段的数据结构和前段想要展现的结构不一致，这个时候就需要前段获取到后端的数据后对数据结构重新包装，最常见的一个场景就是列转行或者行转列的操作.此次我们主要进行列转行的操作.

后端返回的数据：

var data=[
{'A':3,'B':11,'C':21},
{'A':4,'B':12,'C':22,'F':130},
{'A':5,'B':13,'C':23,'E':120},
{'A':6,'B':14,'C':24,'D':99,'F':140},
{'A':7,'B':15,'C':25,'D':100}
];

最终效果：

image.png

var data=[
{'A':3,'B':11,'C':21},
{'A':4,'B':12,'C':22,'F':130},
{'A':5,'B':13,'C':23,'E':120},
{'A':6,'B':14,'C':24,'D':99,'F':140},
{'A':7,'B':15,'C':25,'D':100}
];


function columnToLine(data){
    //1.判断传入的json为空时什么都不做直接返回
    if(!data){
        return;
    }
    //2.定义一个空json，用于存放将列转换为行的结果
    var result={};
    //3.循环遍历data json串中的每一项
    for(var i=0;i<data.length;i++){
        //4.遍历每一项中的每个kv json对
        for(var item in data[i]){//item代表data json串中的每一项的key
            //5.根据key获取data中每一行中的每个key,也就是item，
            //然后根据item从result中获取对应key的值,如果为空表示第一次进来
            var kv = result[item];
            if(kv){
                //6.最终结果相同key的值存放到一个数组中
                kv.push(data[i][item]);
            }else{
                //7.第一次存入时初始化key对应的数组
                result[item]=[];
                result[item].push(data[i][item]);
            }
        }
    }
    return result;
}


var result = columnToLine(data);
console.log(result);