通常情况下,从后端传来的数据是简单格式的。我们常常要把数据转化为带有嵌套关系的数据,才方便前端渲染,数据转化中有不少坑要注意。
首先json格式的数据本质上是对象,键值对是对象的写法,例如这样{{},{},{}}
。所以,我们要在使用变量前要声明该变量是对象var test1 = new Object();
。
其次要注意传进来的的数据是否是json格式的?索引格式和json格式在火狐上表现相似,在循环中也可以找到,但在不同的循环中索引值是不一样的,容易出错,需要将格式转化。
var test2 = JSON.parse(JSON.stringify(test1);
ps:在vue模板中使用时,不可提前在data中定义test2数据,否则格式并不会转换。
最后用for的方法遍历对象,嵌套if来判断进行分层,并且改变。
for(var i=0; i<vmain.menu.length; i++){
//这是数据分层
if(vmain.menu[i].level == 1){
//添加一个child的键
test1["child"] = {};
vmain.c1menu[a]= b;
}else if(vmain.menu[i].level == 2){
vmain.c2menu[a]= b;
}
};
//这是数据拼装
for(var i=0; i<vmain.menu.length; i++){
if(vmain.menu[i].level == 1){
continue;
}else if(vmain.menu[i].level == 2){
//这是将第二层的数据插入第一层的child中,拼装的复杂数据
vmain.c1menu[vmain.c2menu[vmain.menu[i].id].pid].child[vmain.menu[i].id]=vmain.c2menu[vmain.menu[i].id]
}
};
这就是简单数据的转化。