Lodash: how to group using multiple nested properties?

Question

Trying to group my array using 2 nested properties of object. Below is the data I'm working with. I need to group this data using start and end properties which are nested in time object here

`

[{
    "id": 227,
    "day": 0,
    "time": {
        "id": 31,
        "start": "03:00:00",
        "end": "06:00:00"
    },
    "max_tasks": 3
}, {
    "id": 228,
    "day": 1,
    "time": {
        "id": 31,
        "start": "03:00:00",
        "end": "06:00:00"
    },
    "max_tasks": 3
}, {
    "id": 229,
    "day": 2,
    "time": {
        "id": 31,
        "start": "03:00:00",
        "end": "06:00:00"
    },
    "max_tasks": 3
}, {
    "id": 230,
    "day": 3,
    "time": {
        "id": 31,
        "start": "03:00:00",
        "end": "06:00:00"
    },
    "max_tasks": 3
}, {
    "id": 231,
    "day": 4,
    "time": {
        "id": 31,
        "start": "03:00:00",
        "end": "06:00:00"
    },
    "max_tasks": 3
}, {
    "id": 232,
    "day": 5,
    "time": {
        "id": 31,
        "start": "03:00:00",
        "end": "06:00:00"
    },
    "max_tasks": 3
}, {
    "id": 233,
    "day": 6,
    "time": {
        "id": 31,
        "start": "03:00:00",
        "end": "06:00:00"
    },
    "max_tasks": 3
}, {
    "id": 283,
    "day": 0,
    "time": {
        "id": 39,
        "start": "06:00:00",
        "end": "08:00:00"
    },
    "max_tasks": 3
}, {
    "id": 284,
    "day": 1,
    "time": {
        "id": 39,
        "start": "06:00:00",
        "end": "08:00:00"
    },
    "max_tasks": 3
}, {
    "id": 285,
    "day": 2,
    "time": {
        "id": 39,
        "start": "06:00:00",
        "end": "08:00:00"
    },
    "max_tasks": 3
}, {
    "id": 286,
    "day": 3,
    "time": {
        "id": 39,
        "start": "06:00:00",
        "end": "08:00:00"
    },
    "max_tasks": 3
}, {
    "id": 287,
    "day": 4,
    "time": {
        "id": 39,
        "start": "06:00:00",
        "end": "08:00:00"
    },
    "max_tasks": 3
}, {
    "id": 288,
    "day": 5,
    "time": {
        "id": 39,
        "start": "06:00:00",
        "end": "08:00:00"
    },
    "max_tasks": 3
}, {
    "id": 289,
    "day": 6,
    "time": {
        "id": 39,
        "start": "06:00:00",
        "end": "08:00:00"
    },
    "max_tasks": 3
}]

`

Currently I can group using one property using code below but not both:

var result = _.groupBy(this.slots, 'time.start')

Expected data could look like below: `

03: 00: 00 - 06: 00: 00: [{
        "id": 227,
        "day": 0,
        "time": {
            "id": 31,
            "start": "03:00:00",
            "end": "06:00:00"
        },
        "max_tasks": 3
    },
    {
        "id": 228,
        "day": 1,
        "time": {
            "id": 31,
            "start": "03:00:00",
            "end": "06:00:00"
        },
        "max_tasks": 3
    }
]
06: 00: 00 - 08: 00: 00: [{
        "id": 283,
        "day": 0,
        "time": {
            "id": 39,
            "start": "06:00:00",
            "end": "08:00:00"
        },
        "max_tasks": 3
    },
    {
        "id": 284,
        "day": 1,
        "time": {
            "id": 39,
            "start": "06:00:00",
            "end": "08:00:00"
        },
        "max_tasks": 3
    }
]

`

Thanks in advance :)

Answer 1

Use _.groupBy() with a callback, and generate the key from start and end:

const data = [{"id":227,"day":0,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":228,"day":1,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":229,"day":2,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":230,"day":3,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":231,"day":4,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":232,"day":5,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":233,"day":6,"time":{"id":31,"start":"03:00:00","end":"06:00:00"},"max_tasks":3},{"id":283,"day":0,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":284,"day":1,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":285,"day":2,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":286,"day":3,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":287,"day":4,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":288,"day":5,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3},{"id":289,"day":6,"time":{"id":39,"start":"06:00:00","end":"08:00:00"},"max_tasks":3}]

const result = _.groupBy(data, ({ time: { start, end } }) => `${start} - ${end}`)

console.log(result)

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

Answer 2

You can use the function reduce for grouping by those values.

let arr = [{    "id": 227,    "day": 0,    "time": {        "id": 31,        "start": "03:00:00",        "end": "06:00:00"    },    "max_tasks": 3}, {    "id": 228,    "day": 1,    "time": {        "id": 31,        "start": "03:00:00",        "end": "06:00:00"    },    "max_tasks": 3}, {    "id": 229,    "day": 2,    "time": {        "id": 31,        "start": "03:00:00",        "end": "06:00:00"    },    "max_tasks": 3}, {    "id": 230,    "day": 3,    "time": {        "id": 31,        "start": "03:00:00",        "end": "06:00:00"    },    "max_tasks": 3}, {    "id": 231,    "day": 4,    "time": {        "id": 31,        "start": "03:00:00",        "end": "06:00:00"    },    "max_tasks": 3}, {    "id": 232,    "day": 5,    "time": {        "id": 31,        "start": "03:00:00",        "end": "06:00:00"    },    "max_tasks": 3}, {    "id": 233,    "day": 6,    "time": {        "id": 31,        "start": "03:00:00",        "end": "06:00:00"    },    "max_tasks": 3}, {    "id": 283,    "day": 0,    "time": {        "id": 39,        "start": "06:00:00",        "end": "08:00:00"    },    "max_tasks": 3}, {    "id": 284,    "day": 1,    "time": {        "id": 39,        "start": "06:00:00",        "end": "08:00:00"    },    "max_tasks": 3}, {    "id": 285,    "day": 2,    "time": {        "id": 39,        "start": "06:00:00",        "end": "08:00:00"    },    "max_tasks": 3}, {    "id": 286,    "day": 3,    "time": {        "id": 39,        "start": "06:00:00",        "end": "08:00:00"    },    "max_tasks": 3}, {    "id": 287,    "day": 4,    "time": {        "id": 39,        "start": "06:00:00",        "end": "08:00:00"    },    "max_tasks": 3}, {    "id": 288,    "day": 5,    "time": {        "id": 39,        "start": "06:00:00",        "end": "08:00:00"    },    "max_tasks": 3}, {    "id": 289,    "day": 6,    "time": {        "id": 39,        "start": "06:00:00",        "end": "08:00:00"    },    "max_tasks": 3}]
let result = arr.reduce((a, c) => {
  let key = `${c.time.start} - ${c.time.end}`;
  (a[key] || (a[key] = [])).push(c);
  return a;
}, {});

console.log(result);

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