使用Lodash，如何將這些數據轉換為所需的格式？

Question

我對lodash相當陌生，並懷疑它可以幫助我以所需的方式轉換數據。 我一直在閱讀lodash文檔，但是老實說它並沒有陷入，我沒有看到我需要的正確操作組合。

這是我想做的：

var configs = [ { 
      configId: 1,
      options: [ {categoryId: 1, id: 100},
                 {categoryId: 2, id: 200},
                 {categoryId: 3, id: 300} ] },
    { 
      configId: 2,
      options: [ {categoryId: 1, id: 105},
                 {categoryId: 2, id: 210} ] },
    { 
      configId: 3,
      options: [ {categoryId: 2, id: 200},
                 {categoryId: 1, id: 165},
                 {categoryId: 3, id: 300} ] }
];

//  I want the above to look like this:
/*
[ {categoryId: 1, ids: [100, 105, 165]},
  {categoryId: 2, ids: [200, 210]},
  {categoryId: 3, ids: [300]} ]
*/

如果您想嘗試，這里是一個小提琴 。

當我看問題時，我想我要：

1. 結合所有的configs對象，所以我有configs的options對象
2. 按categoryId分組
3. 然后我真的迷路了……我懷疑我可以在這里使用reduce（），但是我還認為我需要一個map（）才能真正生成轉換后的對象。

無論如何，我正在對此進行討論，但沒有取得進展，我希望有人可以為我指明正確的方向。

Answer 1

使用ES2015語法：

_.map(
  _.groupBy(_.flatMap(configs, config => config.options), 'categoryId'), 
  (val, key) => ({categoryId: key, ids: _.uniq(_.map(val, v => v.id)) })
)

兼容ES5（由Babel生成）：

_.map(
  _.groupBy(
    _.flatMap(configs, function (config) {
    return config.options;
    }), 
  'categoryId'), 
  function (val, key) {
    return {
        categoryId: key,
        ids: _.uniq(_.map(val, function (v) {
            return v.id;
        }))
    };
});

說明：

_.flatMap(configs, config => config.options)

從每個配置對象獲取options數組，將它們展平為[{categoryId: xx, id: yy}, ...]的單個數組

[ {categoryId:1,id:100},
  {categoryId:2,id:200},
  {categoryId:3,id:300},
  {categoryId:1,id:105},
  {categoryId:2,id:210},
  {categoryId:2,id:200},
  {categoryId:1,id:165},
  {categoryId:3,id:300} ]


_.groupBy(..., 'categoryId')

數組上方按其categoryId ，如[{xx: [categoryId: xx, id: yy}, ...]

{
    1:[
        {categoryId:1,id:100},
        {categoryId:1,id:105},
        {categoryId:1,id:165} ],
    2:[
        {categoryId:2,id:210},
        {categoryId:2,id:200},
        {categoryId:2,id:200} ],
    3:[
        {categoryId:3,id:300},
        {categoryId:3,id:300} ] }

_.map(..., (val, key) => ({categoryId: key, ids: _.uniq(_.map(val, v => v.id)) }))

接收val = [{xx: [categoryId: xx, id: yy}, ...] ， key: xx並將它們映射到categoryId設置為已接收密鑰的對象，並將ids映射到來自分組對象的唯一id數組。 結果是您想要的數組。

[ {
    categoryId:1,
    ids:[100,105,165]},
  {
    categoryId:2,
    ids:[200,210]},
  {
    categoryId:3,
    ids:[300]}]

Answer 2

 var configs = [{ configId: 1, options: [ {categoryId: 1, id: 100}, {categoryId: 2, id: 200}, {categoryId: 3, id: 300} ] }, { configId: 2, options: [ {categoryId: 1, id: 105}, {categoryId: 2, id: 210} ] }, { configId: 3, options: [ {categoryId: 2, id: 200}, {categoryId: 1, id: 165}, {categoryId: 3, id: 300} ] }]; var result = _.chain(configs) .flatMap(config => config.options) .groupBy(id => id.categoryId) .map((list, categoryId) => ({ categoryId: +categoryId, ids: _.chain(list) .map(x => x.id) .uniq() .value() })) .value(); document.body.textContent = JSON.stringify(result,null,2); 

 body { white-space: pre-wrap; } 

 <script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>