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

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; } 

Answer 2

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>