分組數據集合中的一個格式轉換成另一個

Question

一個說我有這個集合：

{ 
    collections: [ 
     { 
      collection_name: "One", 
      url_slug: "one", 
      collection_type: "group-one", 
      id: 700001 
     }, { 
      collection_name: "Two", 
      url_slug: "two", 
      collection_type: "group-one", 
      id: 700002 
     }, { 
      collection_name: "Three", 
      url_slug: "three", 
      collection_type: "group-one", 
      id: 700003 
     }, { 
      collection_name: "Four", 
      url_slug: "four", 
      collection_type: "group-one", 
      id: 700004 
     }, { 
      collection_name: "Five", 
      url_slug: "five", 
      collection_type: "group-one", 
      id: 700005 
     }, { 
      collection_name: "Six", 
      url_slug: "six", 
      collection_type: "group-one", 
      id: 700006 
     }, { 
      collection_name: "Seven", 
      url_slug: "seven", 
      collection_type: "group-two", 
      id: 700007 
     }, { 
      collection_name: "Eight", 
      url_slug: "eight", 
      collection_type: "group-three", 
      id: 700008 
     }, { 
      collection_name: "Nine", 
      url_slug: "nine", 
      collection_type: "group-three", 
      id: 700009 
     }, { 
      collection_name: "Ten", 
      url_slug: "ten", 
      collection_type: "group-four", 
      id: 700010 
     } 
    ] 
} 

...和我需要的數據和使用collection_type值作爲重點創建集合的一個新組每一個新的集合：

{ 
    "group-one": [ 
     { 
      collection_name: "One", 
      url_slug: "one", 
      id: 700001 
     }, { 
      collection_name: "Two", 
      url_slug: "two", 
      id: 700002 
     }, { 
      collection_name: "Three", 
      url_slug: "three", 
      id: 700003 
     }, { 
      collection_name: "Four", 
      url_slug: "four", 
      id: 700004 
     }, { 
      collection_name: "Five", 
      url_slug: "five", 
      id: 700005 
     }, { 
      collection_name: "Six", 
      url_slug: "six", 
      id: 700006 
     } 
    ], 
    "group-two": [ 
     { 
      collection_name: "Seven", 
      url_slug: "seven", 
      id: 700007 
     } 
    ], 
    "group-three": [ 
     { 
      collection_name: "Eight", 
      url_slug: "eight", 
      id: 700008 
     }, { 
      collection_name: "Nine", 
      url_slug: "nine", 
      id: 700009 
     } 
    ], 
    "group-four": [ 
      { 
      collection_name: "Ten", 
      url_slug: "ten", 
      id: 700010 
     } 
    ] 
} 

除了剛剛創建一個新的對象，通過獨創的循環，並在新的對象推項鍵，有沒有更簡單，更簡潔的方法 - 可能使用Lodash - 敲了這一點？

Answer 1

使用本機的可能解決方案Array#forEach。

const data = {"collections":[{"collection_name":"One","url_slug":"one","collection_type":"group-one","id":700001},{"collection_name":"Two","url_slug":"two","collection_type":"group-one","id":700002},{"collection_name":"Three","url_slug":"three","collection_type":"group-one","id":700003},{"collection_name":"Four","url_slug":"four","collection_type":"group-one","id":700004},{"collection_name":"Five","url_slug":"five","collection_type":"group-one","id":700005},{"collection_name":"Six","url_slug":"six","collection_type":"group-one","id":700006},{"collection_name":"Seven","url_slug":"seven","collection_type":"group-two","id":700007},{"collection_name":"Eight","url_slug":"eight","collection_type":"group-three","id":700008},{"collection_name":"Nine","url_slug":"nine","collection_type":"group-three","id":700009},{"collection_name":"Ten","url_slug":"ten","collection_type":"group-four","id":700010}]}; 
 
const obj = {}; 
 

 
data.collections.forEach(({ collection_type, ...z }) => { 
 
    (obj[collection_type] || (obj[collection_type] = [])).push({ 
 
    ...z, 
 
    }); 
 
}) 
 

 
console.log(obj);

或者Array#reduce。

const data = {"collections":[{"collection_name":"One","url_slug":"one","collection_type":"group-one","id":700001},{"collection_name":"Two","url_slug":"two","collection_type":"group-one","id":700002},{"collection_name":"Three","url_slug":"three","collection_type":"group-one","id":700003},{"collection_name":"Four","url_slug":"four","collection_type":"group-one","id":700004},{"collection_name":"Five","url_slug":"five","collection_type":"group-one","id":700005},{"collection_name":"Six","url_slug":"six","collection_type":"group-one","id":700006},{"collection_name":"Seven","url_slug":"seven","collection_type":"group-two","id":700007},{"collection_name":"Eight","url_slug":"eight","collection_type":"group-three","id":700008},{"collection_name":"Nine","url_slug":"nine","collection_type":"group-three","id":700009},{"collection_name":"Ten","url_slug":"ten","collection_type":"group-four","id":700010}]}; 
 

 
const res = data.collections.reduce((s, { collection_type, ...z }) => { 
 
    (s[collection_type] || (s[collection_type] = [])).push({ 
 
    ...z, 
 
    }); 
 
    return s; 
 
}, {}) 
 

 
console.log(res);

最後 - ES5的解決方案（不ES6功能）。

var data = {"collections":[{"collection_name":"One","url_slug":"one","collection_type":"group-one","id":700001},{"collection_name":"Two","url_slug":"two","collection_type":"group-one","id":700002},{"collection_name":"Three","url_slug":"three","collection_type":"group-one","id":700003},{"collection_name":"Four","url_slug":"four","collection_type":"group-one","id":700004},{"collection_name":"Five","url_slug":"five","collection_type":"group-one","id":700005},{"collection_name":"Six","url_slug":"six","collection_type":"group-one","id":700006},{"collection_name":"Seven","url_slug":"seven","collection_type":"group-two","id":700007},{"collection_name":"Eight","url_slug":"eight","collection_type":"group-three","id":700008},{"collection_name":"Nine","url_slug":"nine","collection_type":"group-three","id":700009},{"collection_name":"Ten","url_slug":"ten","collection_type":"group-four","id":700010}]}; 
 

 
var res = data.collections.reduce(function(s, a) { 
 
    (s[a.collection_type] || (s[a.collection_type] = [])).push({ 
 
    id: a.id, 
 
    collection_name: a.collection_name, 
 
    url_slug: a.url_slug, 
 
    }); 
 
    return s; 
 
}, {}) 
 

 
console.log(res);

Answer 2

使用lodash，你可以嘗試這樣的事：

var data = {collections: {...}}; 

var group = _(data.collections) 
       .groupBy('collection_type') 
       .forEach(function(records, groupName) { 
        // clean up/modify records 
        records.forEach(function(record) { 
        delete record['collection_type']; 
        }); 
       }); 

run on JSFiddle

附：舊的lodash版本可能需要.value()在鏈的末端_(...).groupBy().forEach().value()