Nested array group-by with lodash

Question

I have a small web-application which fetches data using API call, the response is array of reports, each report have unique id, application, type and title.

I want to map it into new object by grouping-by application and then by types as describe bellow.

Input:

[
  {
    "id": "REPORT1",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT2",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT3",
    "application": "APP1",
    "type": "TYPE2",
    "title": ""
  },
  {
    "id": "REPORT4",
    "application": "APP2",
    "type": "TYPE3",
    "title": ""
  }
]

Desired output:

{
  "APP1": {
    "TYPE1": [
      {
        "id": "REPORT1",
        "application": "APP1",
        "type": "TYPE1",
        "title": ""
      },
      {
        "id": "REPORT2",
        "application": "APP1",
        "type": "TYPE1",
        "title": ""
      }
    ],
    "TYPE2": [
      {
        "id": "REPORT3",
        "application": "APP1",
        "type": "TYPE2",
        "title": ""
      }
    ]
  },
  "APP2": {
    "TYPE3": [
      {
        "id": "REPORT4",
        "application": "APP2",
        "type": "TYPE3",
        "title": ""
      }
    ]
  }
}

With loadash I came up with this:

const output = _(input)
  .groupBy(report => report.application)
  .value()

After group by application, I need to make another nested grouping or mapping by type but got stuck.

Dacre Denny · Accepted Answer · 2018-12-26 09:32:44Z

13

This can be implemented quite easily without lodash via the Array#reduce() function.

For details on how this is achieved, see the comments in code snippets source code:

var input = [{
    "id": "REPORT1",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT2",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT3",
    "application": "APP1",
    "type": "TYPE2",
    "title": ""
  },
  {
    "id": "REPORT4",
    "application": "APP2",
    "type": "TYPE3",
    "title": ""
  }
];

var output = input.reduce((result, item) => {

  // Get app object corresponding to current item from result (or insert if not present)
  var app = result[item.application] = result[item.application] || {};

  // Get type array corresponding to current item from app object (or insert if not present)
  var type = app[item.type] = app[item.type] || [];

  // Add current item to current type array
  type.push(item);

  // Return the result object for this iteration
  return result;

}, {});

console.log(output);

.as-console-wrapper {
height:100% !important;
max-height:unset !important;
}

edited Dec 26, 2018 at 9:32

answered Dec 26, 2018 at 9:30

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alexandre Elshobokshy Over a year ago

Good job doing it without loadash :)

mercury Over a year ago

Thx for mentioning reduce ……

Dacre Denny Over a year ago

You're welcome @HossamMaher

Gautier Over a year ago

hey ! Do you know how to type this function with typescript ? and type the output ? Thanks

Dacre Denny Over a year ago

@Gautier something like this might work? gist.github.com/dacre-denny/a86211ea59e54cd03474db0106578888

|

Prasanna · Accepted Answer · 2018-12-26 09:42:09Z

8

es6, object spreading and reduce makes it so simpler

const input = [
  {
    "id": "REPORT1",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT2",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT3",
    "application": "APP1",
    "type": "TYPE2",
    "title": ""
  },
  {
    "id": "REPORT4",
    "application": "APP2",
    "type": "TYPE3",
    "title": ""
  }
]


const output = input.reduce((acc, item) => ({
  ...acc,
  [item.application]: {
    ...acc[item.application],
    [item.type]: [
      ...(acc[item.application] && acc[item.application][item.type] || []),
      item,
    ]
  }
}), {})

console.log(output)

answered Dec 26, 2018 at 9:42

Prasanna

4,7461 gold badge26 silver badges47 bronze badges

Comments

Nina Scholz · Accepted Answer · 2018-12-26 09:54:37Z

You could take a dynamic approach with the wanted keys for grouping.

groups = ["application", "type"]

Then reduce the data array and the keys array and build either new objects, if necessary or with the last group an array for pushing the actual object.

This solution can be easily extended to more nested groups, if necessary.

var data = [{ id: "REPORT1", application: "APP1", type: "TYPE1", title: "" }, { id: "REPORT2", application: "APP1", type: "TYPE1", title: "" }, { id: "REPORT3", application: "APP1", type: "TYPE2", title: "" }, { id: "REPORT4", application: "APP2", type: "TYPE3", title: "" }],
    groups = ["application", "type"],
    grouped = data.reduce((r, o) => {
        groups
            .reduce((group, key, i, { length }) =>
                group[o[key]] = group[o[key]] || (i + 1 === length ? [] : {}), r)
            .push(o);

        return r;
    }, {});
    
console.log(grouped);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Rory · Accepted Answer · 2021-05-15 12:19:17Z

4

I personally found this more readable when combining _.groupBy and _.mapValues in Lodash:

var input = [{ id: "REPORT1", application: "APP1", type: "TYPE1", title: "" }, { id: "REPORT2", application: "APP1", type: "TYPE1", title: "" }, { id: "REPORT3", application: "APP1", type: "TYPE2", title: "" }, { id: "REPORT4", application: "APP2", type: "TYPE3", title: "" }]

const output = _.mapValues(_.groupBy(input, i => i.application),app => _.groupBy(app, i => i.type))

console.log(output)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

answered May 15, 2021 at 12:19

Rory

2,5061 gold badge29 silver badges45 bronze badges

1 Comment

Matej Kormuth Over a year ago

Is it still readable when you group by by 5 keys, what about 10 keys?

Mostafa Sherif · Accepted Answer · 2023-01-25 19:48:38Z

0

I've written a short method to do this, check below snippet.

const groupByDeep = (collection, keys) => {
  return _.chain(collection)
    .map(item => _.map(keys, key => _.get(item, key)))
    .reduce((result, paths, idx) => {
      const items = _.get(result, paths.join('.'), []);
      _.set(result, paths.join('.'), [...items, collection[idx]]);
      return result;
    }, {})
    .value();
};

const input = [{
    "id": "REPORT1",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT2",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT3",
    "application": "APP1",
    "type": "TYPE2",
    "title": ""
  },
  {
    "id": "REPORT4",
    "application": "APP2",
    "type": "TYPE3",
    "title": ""
  }
];

console.log(groupByDeep(input, ['application', 'type']));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

edited Jan 25, 2023 at 19:48

answered Jan 25, 2023 at 19:47

Mostafa Sherif

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Nested array group-by with lodash

Input:

Desired output:

5 Answers 5

6 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Input:

Desired output:

5 Answers 5

6 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related