目标是实现如图的分类列表,但是有类目名称的缺失。
说一下我主要进行的步骤和问题
首先,发送请求获取数据
得到数据res.data,将给this.Cates赋值,打印这些数据。
数据内容是大致是这样的,有cate_id类目号,cate_parentId父类目号,cate_name类目名等,结构类似于树状图。
其次就是筛选相应数据了,左侧栏目根据要求,遍历一下这个数组,把cate_parent=0的保存下来就行了,也没有问题。
这里说一下我遇到的问题,在筛选右侧数据栏的数据时,我是使用二维数组的,因为前端显示的时候二重循环就行了,这里贴一下我的代码
//构造右侧商品数据
var rightCate=[];
var rightCateSon= new Array();
var j=0;
for(var i in this.Cates)
{
if(this.Cates[i].cate_parentid==1){
rightCate[j]=this.Cates[i];
j++;
}
}
for(var k in rightCate){
rightCateSon[k]=new Array();
j=0;
for(var i in this.Cates){
if(this.Cates[i].cate_parentid==rightCate[k].cate_id){
rightCateSon[k][j]=this.Cates[i];
j++;
}
}
rightCateSon[k].cate_name=rightCate[k].cate_name;
console.log(rightCate[k].cate_name);
}
console.log(rightCateSon);
this.setData({
leftMenuList,
rightCateSon:rightCateSon
});
这里前面是构造一个二维数组
以上,k为行号,i为列号
那么在这里,看红框的第一行,我给这个二维数组,每一行添加了一个属性叫做cate_name,现在我将这个二维数组rightCateSon,打印
看打印的结果
这个是蔬菜豆制品的子栏目,也就是最开始的图上的数据,这里看到,确实是一个二维数组,数组每一行有一个cate_name的属性,我需要在第一个循环里面读取这个cate_name,显示 蔬菜 豆制品
那么我使用this.setData进行数据绑定,给页面调用,把这个rightCateSon进行this.setDate
我们都知道,data里面的数据会在AppData中显示,那么在AppData里面看看
奇怪的事情发生了
这是个二维数组没错,但我给每一行添加的cate_name属性不见了
前端页面渲染如开始的图一样,获取不到这个cate_name的属性
前面构造二维数组rightCateSon的时候,已经给每一行添加cate_name属性,但是this.setData后这个属性却不见了。
简言之,主要问题
有一个二维数组,里面每一行外加一属性,属性名叫cate_name
但是,把这个二维数组this.setData之后,这俩cate_name的属性都不见了,赋值赋不进去。