vue2.0中現(xiàn)有模擬數(shù)據(jù)，請(qǐng)問拿到數(shù)據(jù)的時(shí)候怎么給數(shù)據(jù)分類呢？每個(gè)id相同的為一類，一起最終渲染的時(shí)候吧每個(gè)id相等的渲染在

vue2.0中現(xiàn)有模擬數(shù)據(jù)，請(qǐng)問拿到數(shù)據(jù)的時(shí)候怎么給數(shù)據(jù)分類呢？每個(gè)id相同的為一類
數(shù)據(jù)如下

    articleList:[
                {id:1,name:"小紅",user:456312,Occupation:"教練"},
                {id:2,name:"小張",user:456321,Occupation:"歌手"},
                {id:5,name:"小強(qiáng)",user:456312,Occupation:"老師"},
                {id:2,name:"小分",user:456312,Occupation:"同事"},
                {id:5,name:"小撒",user:456132,Occupation:"總經(jīng)理"},
                {id:2,name:"小看",user:456132,Occupation:"程序猿"},
                {id:5,name:"小貧",user:451632,Occupation:"演員"}
            ],

每個(gè)id相同的是一類，最終頁面渲染的時(shí)候會(huì)把相同一類的渲染在一個(gè)div里面，
請(qǐng)大神賜教，
(有多少個(gè)不等的id就有幾個(gè)大的div)；

回答

編輯回答

柒喵

同跟樓上的想法類似，先進(jìn)行數(shù)據(jù)的預(yù)處理會(huì)比較方便，當(dāng)然如果后臺(tái)會(huì)給你做這個(gè)事情更好，但是，自己處理一下也不是難事。

let articleList = [
  { id: 1, name: '小紅', user: 456312, Occupation: '教練' },
  { id: 2, name: '小張', user: 456321, Occupation: '歌手' },
  { id: 5, name: '小強(qiáng)', user: 456312, Occupation: '老師' },
  { id: 2, name: '小分', user: 456312, Occupation: '同事' },
  { id: 5, name: '小撒', user: 456132, Occupation: '總經(jīng)理' },
  { 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);

2017年9月5日 17:22

編輯回答

小眼睛

我的想法是處理數(shù)據(jù)

let  articleList=[
                {id:1,name:"小紅",user:456312,Occupation:"教練"},
                {id:2,name:"小張",user:456321,Occupation:"歌手"},
                {id:5,name:"小強(qiáng)",user:456312,Occupation:"老師"},
                {id:2,name:"小分",user:456312,Occupation:"同事"},
                {id:5,name:"小撒",user:456132,Occupation:"總經(jīng)理"},
                {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));
//遍歷此數(shù)組并在articleList找到id相同的放入新數(shù)組
let newArr=[];
idArr.forEach(function(v){
    newArr.push(articleList.filter(function(x){
        return x.id==v
    }))
})
 //得到newArr
![圖片描述][2]
渲染便利此數(shù)組即可

2018年2月22日 09:07