案例背景:
在公司項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)遇到后端返回到前段的數(shù)據(jù)結(jié)構(gòu)和前段想要展現(xiàn)的結(jié)構(gòu)不一致椭坚，這個(gè)時(shí)候就需要前段獲取到后端的數(shù)據(jù)后對(duì)數(shù)據(jù)結(jié)構(gòu)重新包裝搏色，最常見(jiàn)的一個(gè)場(chǎng)景就是列轉(zhuǎn)行或者行轉(zhuǎn)列的操作.此次我們主要進(jìn)行列轉(zhuǎn)行的操作.
后端返回的數(shù)據(jù)：
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為空時(shí)什么都不做直接返回
if(!data){
return;
}
//2.定義一個(gè)空json频轿，用于存放將列轉(zhuǎn)換為行的結(jié)果
var result={};
//3.循環(huán)遍歷data json串中的每一項(xiàng)
for(var i=0;i<data.length;i++){
//4.遍歷每一項(xiàng)中的每個(gè)kv json對(duì)
for(var item in data[i]){//item代表data json串中的每一項(xiàng)的key
//5.根據(jù)key獲取data中每一行中的每個(gè)key,也就是item，
//然后根據(jù)item從result中獲取對(duì)應(yīng)key的值,如果為空表示第一次進(jìn)來(lái)
var kv = result[item];
if(kv){
//6.最終結(jié)果相同key的值存放到一個(gè)數(shù)組中
kv.push(data[i][item]);
}else{
//7.第一次存入時(shí)初始化key對(duì)應(yīng)的數(shù)組
result[item]=[];
result[item].push(data[i][item]);
}
}
}
return result;
}
var result = columnToLine(data);
console.log(result);
