有的時候后臺返回的數(shù)據(jù)，前端要進(jìn)行頁面渲染，但是數(shù)據(jù)結(jié)構(gòu)并不是那么感人，于是就倒弄了一點處理方式，分享一下。
第一種，返回來的數(shù)據(jù)是對象，可以通過ES6的entries方法來處理，具體代碼如下
var obj = {
? ? ? ? ? ? "liuban":{
? ? ? ? ? ? ? ? name:"Jodan",
? ? ? ? ? ? ? ? age:19,
? ? ? ? ? ? ? ? height:190,
? ? ? ? ? ? ? ? weight:78
? ? ? ? ? ? },
? ? ? ? ? ? "qiban":{
? ? ? ? ? ? ? ? name:"Air",
? ? ? ? ? ? ? ? age:21,
? ? ? ? ? ? ? ?height:187,
? ? ? ? ? ? ? ? weight:75
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? var list = [];
// 使用ES6中Object.entries(obj)方法
? ? ? ? for(let [key,value] of Object.entries(obj)){
? ? ? ? ? ? list.push({
? ? ? ? ? ? ? ? id: key,
? ? ? ? ? ? ? ? name: value.name,
? ? ? ? ? ? ? ? age: value.age,
? ? ? ? ? ? ? ? children:[
? ? ? ? ? ? ? ? ? ? {'身高':value.height, '體重':value.weight}
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? })
? ? ? ? };
? ? ? ? console.log(list);
可以輸出這樣的數(shù)據(jù)
[
{
id:?"liuban"
name:?"Jodan"
age:?19
children: [ {身高:?190,?體重:?78}]
},{.........}
]
第二種，通過map函數(shù)遍歷數(shù)組，不過需要后臺返回來的對象數(shù)據(jù)先變成數(shù)組后再操作，具體可以這樣
var obj = {........};
var list = [];
? ? ? ? for(var key in obj){
? ? ? ? ? ? list.push(obj[key]);
? ? ? ? }
? ? ? ? var result = list.map((item) => {
? ? ? ? ? ? const object = {
? ? ? ? ? ? ? ? name:item.name,
? ? ? ? ? ? ? ? age:item.age
? ? ? ? ? ? }
? ? ? ? ? ? object.children = [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? '身高':item.height，
? ? ? ? ? ? ? ? ? ? '體重':item.weight
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? ? ? return object;
? ? ? ? });
? ? ? ? console.log(result);
不過這樣的話，之前后臺返回來的數(shù)據(jù)對象key值在對象轉(zhuǎn)換成數(shù)組的時候沒有遍歷出來，獲得的數(shù)組對象中沒有key值，也就是存儲的那個id值，liuban和qiban
