Lodash：如何使用多個嵌套屬性進行分組？

Question

嘗試使用2個對象的嵌套屬性對數組進行分組。 以下是我正在使用的數據。 我需要使用嵌套在time對象中的start和end屬性對數據進行分組

`

[{
    "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
}]

`

目前，我可以使用以下代碼使用一個屬性進行分組，但不能同時使用兩者：

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

預期數據可能如下所示：

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

`

提前致謝 ：）

Answer 1

您可以使用reduce函數對這些值進行分組。

 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

將_.groupBy()與回調一起使用，並從start和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>