vue2.0中现有模拟数据，请问拿到数据的时候怎么给数据分类呢？每个id相同的为一类，一起最终渲染的时候吧每个id相等的渲染在

Question

vue2.0中现有模拟数据，请问拿到数据的时候怎么给数据分类呢？每个id相同的为一类
数据如下

    articleList:[
                {id:1,name:"小红",user:456312,Occupation:"教练"},
                {id:2,name:"小张",user:456321,Occupation:"歌手"},
                {id:5,name:"小强",user:456312,Occupation:"老师"},
                {id:2,name:"小分",user:456312,Occupation:"同事"},
                {id:5,name:"小撒",user:456132,Occupation:"总经理"},
                {id:2,name:"小看",user:456132,Occupation:"程序猿"},
                {id:5,name:"小贫",user:451632,Occupation:"演员"}
            ],

每个id相同的是一类，最终页面渲染的时候会把相同一类的渲染在一个div里面，
请大神赐教，
(有多少个不等的id就有几个大的div)；

Answer 1

我的想法是处理数据

let  articleList=[
                {id:1,name:"小红",user:456312,Occupation:"教练"},
                {id:2,name:"小张",user:456321,Occupation:"歌手"},
                {id:5,name:"小强",user:456312,Occupation:"老师"},
                {id:2,name:"小分",user:456312,Occupation:"同事"},
                {id:5,name:"小撒",user:456132,Occupation:"总经理"},
                {id:2,name:"小看",user:456132,Occupation:"程序猿"},
                {id:5,name:"小贫",user:451632,Occupation:"演员"}
            ];
let idArr=articleList.map(function(x){return x.id}) 
![图片描述][1]
//得到id的集合
//去重
idArr=Array.from(new Set(idArr));
//遍历此数组并在articleList找到id相同的放入新数组
let newArr=[];
idArr.forEach(function(v){
    newArr.push(articleList.filter(function(x){
        return x.id==v
    }))
})
 //得到newArr
![图片描述][2]
渲染便利此数组即可
      

Answer 2

同跟楼上的想法类似，先进行数据的预处理会比较方便，当然 如果后台会给你做这个事情更好，但是，自己处理一下也不是难事。

let articleList = [
  { id: 1, name: '小红', user: 456312, Occupation: '教练' },
  { id: 2, name: '小张', user: 456321, Occupation: '歌手' },
  { id: 5, name: '小强', user: 456312, Occupation: '老师' },
  { id: 2, name: '小分', user: 456312, Occupation: '同事' },
  { id: 5, name: '小撒', user: 456132, Occupation: '总经理' },
  { id: 2, name: '小看', user: 456132, Occupation: '程序猿' },
  { id: 5, name: '小贫', user: 451632, Occupation: '演员' },
];

let hashMap = articleList.reduce((hashMap, next) => {
  hashMap[next.id] = hashMap[next.id] ? [...hashMap[next.id], next] : [next];
  return hashMap;
}, {});
console.log(hashMap);