js操作数组分类，一维数组转二维数组

时间扑面而来，岁月带走尘埃

前几天在小程序上遇到一个接口返回一维数组，而我们需要将同字段的内容分组，渲染在选项卡上

模拟数据

lists:[{
  name:"张三",
  age:"25",
  scool:"上海",
  sex:"男"
},{
  name:"李四",
  age:"28",
  scool:"上海",
  sex:"男"
},{
  name:"王五",
  age:"17",
  scool:"四川",
  sex:"女"
},{
  name:"陈六",
  age:"19",
  scool:"四川",
  sex:"女"
}]

需要的结果类似这样，可以数据分开，渲染在选项卡

js操作数组分类

var map = {},
    dest = [];
for(var i = 0; i < arr.length; i++){
var ai = arr[i];
    if(!map[ai.scool]){// 这里是根据scool为条件，进行分组
        dest.push({
name: ai.scool,
data: [ai]
        });
map[ai.id] = ai;// 对象key的唯一性，放到对象中
    }else{
for(var j = 0; j < dest.length; j++){
var dj = dest[j];
if(dj.id == ai.scool){// 对象中存在，并且两个ID相等，添加并跳出循环
                dj.data.push(ai);
break;
            }
        }
    }
}
console.log(dest);// 返会数组

学习来自：https://www.cnblogs.com/xiaomili/p/10536878.html

最终效果

dest: [
{
name: "上海",
data: [{
        name: "张三",
age: "25",
scool: "上海",
sex: "男"
}, {
name: "李四",
age: "28",
scool: "上海",
sex: "男"
}]
},
{
name:"四川",
data:[{
name: "王五",
age: "17",
scool: "四川",
sex: "女"
      }, {
name: "陈六",
age: "19",
scool: "四川",
sex: "女"
   }]
}

js操作数组分类，一维数组转二维数组之后剩下的就是双重v-for循环将它渲染到选项卡上

总结

头发掉的还是不够