JS中具有多个级别的嵌套对象的分组数组

【问题标题】：Group array of nested objects with multiple levels in JSJS中具有多个级别的嵌套对象的分组数组
【发布时间】：2020-10-29 20:41:41
【问题描述】：

我正在尝试将具有多个属性的大型嵌套对象分组，例如：

[
    {
        "_id": "5e7f4d61236c2257490064b4",
        "status": true,
        "name": "Biyokimya",
        "type": [
            {
                "_id": "5e7a78bc07c289220864436e",
                "name": "TUS",
                "__v": 0
            }
        ],
        "__v": 0,
        "branch": [
            216,
            222,
            212
        ],
        "end_date": "2021-09-30T21:00:00.000Z",
        "grade": [
            2022,
            2020
        ],
        "start_date": "2020-10-25T18:47:54.896Z",
        "subtype": [
            {
                "_id": "5f948e39a506ab395ea61f77",
                "name": "Temel Bilimler",
                "__v": 0
            }
        ],
        "year": 2019,
        "videos": [
            {
                "_id": "5eb9559389972764a79aa814",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 1",
                "link": "416924989",
                "start_date": "2020-05-11T13:39:11.000Z",
                "end_date": "2021-05-11T13:39:13.000Z",
                "category": "5e7f4d61236c2257490064b4",
                "__v": 0
            },
            {
                "_id": "5eb955a089972764a79aa815",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 2",
                "link": "416925154",
                "start_date": "2020-05-11T13:39:11.000Z",
                "end_date": "2021-05-11T13:39:13.000Z",
                "category": "5e7f4d61236c2257490064b4",
                "__v": 0
            },
            {
                "_id": "5eb955ad89972764a79aa816",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 3",
                "link": "416925143",
                "start_date": "2020-05-11T13:39:11.000Z",
                "end_date": "2021-05-11T13:39:13.000Z",
                "category": "5e7f4d61236c2257490064b4",
                "__v": 0
            },
            {
                "_id": "5eb955b789972764a79aa817",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 4",
                "link": "416925130",
                "start_date": "2020-05-11T13:39:11.000Z",
                "end_date": "2021-05-11T13:39:13.000Z",
                "category": "5e7f4d61236c2257490064b4",
                "__v": 0
            },
            {
                "_id": "5eb955c289972764a79aa818",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 5",
                "link": "416925116",
                "start_date": "2020-05-11T13:39:11.000Z",
                "end_date": "2021-05-11T13:39:13.000Z",
                "category": "5e7f4d61236c2257490064b4",
                "__v": 0
            }
        ]
    },
    {
        "_id": "5e8b9489f9ae7734dc061419",
        "status": true,
        "name": "Endodonti",
        "type": [
            {
                "_id": "5e7a78c007c289220864436f",
                "name": "DUS",
                "__v": 0
            }
        ],
        "__v": 0,
        "branch": [
            212,
            462
        ],
        "end_date": "2021-10-30T21:00:00.000Z",
        "grade": [
            2023,
            2022,
        ],
        "start_date": "2020-10-29T19:17:53.649Z",
        "subtype": [
            {
                "_id": "5f948e3da506ab395ea61f78",
                "name": "Klinik Bilimler",
                "__v": 0
            }
        ],
        "videos": [
            {
                "_id": "5eb5eccf89972764a79aa7f6",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 1",
                "link": "416513498",
                "start_date": "2020-05-08T23:35:25.000Z",
                "end_date": "2021-05-08T23:35:26.000Z",
                "category": "5e8b9489f9ae7734dc061419",
                "__v": 0
            }
        ],
        "year": 2020
    },
    {
        "_id": "5eac095789972764a79aa675",
        "status": true,
        "name": "Anatomi",
        "type": [
            {
                "_id": "5e7a78bc07c289220864436e",
                "name": "TUS",
                "__v": 0
            }
        ],
        "__v": 0,
        "branch": [
            212,
            216,
            462
        ],
        "end_date": "2021-09-30T21:00:00.000Z",
        "grade": [
            2025,
        ],
        "start_date": "2020-10-25T14:24:26.866Z",
        "subtype": [
            {
                "_id": "5f948e39a506ab395ea61f77",
                "name": "Temel Bilimler",
                "__v": 0
            }
        ],
        "year": 2020,
        "videos": [
            {
                "_id": "5eac09ae89972764a79aa676",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 1",
                "link": "413260985",
                "start_date": "2020-05-01T11:36:02.000Z",
                "end_date": "2021-05-01T11:36:04.000Z",
                "category": "5eac095789972764a79aa675",
                "__v": 0
            },
            {
                "_id": "5eac09d989972764a79aa677",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 2",
                "link": "413263273",
                "start_date": "2020-05-01T11:36:02.000Z",
                "end_date": "2021-05-01T11:36:04.000Z",
                "category": "5eac095789972764a79aa675",
                "__v": 0
            },
            {
                "_id": "5eac09ef89972764a79aa678",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 3",
                "link": "413263244",
                "start_date": "2020-05-01T11:36:02.000Z",
                "end_date": "2021-05-01T11:36:04.000Z",
                "category": "5eac095789972764a79aa675",
                "__v": 0
            },
            {
                "_id": "5eac0a1c89972764a79aa679",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 4",
                "link": "413263225",
                "start_date": "2020-05-01T11:36:02.000Z",
                "end_date": "2021-05-01T11:36:04.000Z",
                "category": "5eac095789972764a79aa675",
                "__v": 0
            }
        ]
    },
    {
        "_id": "5eb13e9289972764a79aa760",
        "status": true,
        "name": "Genel Cerrahi",
        "type": [
            {
                "_id": "5e7a78bc07c289220864436e",
                "name": "TUS",
                "__v": 0
            }
        ],
        "__v": 0,
        "branch": [
            212,
            424,
            442,
            462
        ],
        "end_date": "2021-10-30T21:00:00.000Z",
        "grade": [
            2022,
            2024
        ],
        "start_date": "2020-10-29T19:18:20.053Z",
        "subtype": [
            {
                "_id": "5f948e3da506ab395ea61f78",
                "name": "Klinik Bilimler",
                "__v": 0
            }
        ],
        "videos": [
            {
                "_id": "5eb13ed389972764a79aa761",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 1",
                "link": "414555752",
                "start_date": "2020-05-05T10:24:08.000Z",
                "end_date": "2021-05-05T10:24:09.000Z",
                "category": "5eb13e9289972764a79aa760",
                "__v": 0
            },
            {
                "_id": "5eb13ee589972764a79aa762",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 2",
                "link": "414555748",
                "start_date": "2020-05-05T10:24:08.000Z",
                "end_date": "2021-05-05T10:24:09.000Z",
                "category": "5eb13e9289972764a79aa760",
                "__v": 0
            },
            {
                "_id": "5eb13ef189972764a79aa763",
                "live": false,
                "medianova": true,
                "status": true,
                "name": "Ders 3",
                "link": "414555739",
                "start_date": "2020-05-05T10:24:08.000Z",
                "end_date": "2021-05-05T10:24:09.000Z",
                "category": "5eb13e9289972764a79aa760",
                "__v": 0
            }
        ],
        "year": 2020
    }
]

首先，它们将按年份分组，然后按类型分组，然后按子类型分组。将能够来不同的年份。

我想递归地按对象的 id 对数组进行分组以获得这种输出：

[
    {
      label: "2019",
      children: [
        {
         label: "TUS",
         children: [
          {
            label: "Temel Bilimler",
            children: [
                {
                label: "Biyokimya",
                children: [
                  {
                    label: "Ders 1",
                    id: "xxxxx"
                  },
                  {
                    label: "Ders 2",
                    id: "xxxxx"
                  },
                  // continue data...
                ]
                }
           ]
          }
        ]
      }
    ]
    },
  {
    label: "2020",
    children: [
        {
        label: "TUS",
        children: [
          {
            label: "Temel Bilimler",
            children: [
                {
                label: "Anatomi",
                children: [
                  {
                    label: "Ders 1",
                    id: "xxxxx"
                  },
                  {
                    label: "Ders 2",
                    id: "xxxxx"
                  },
                  // continue data...
                ]
                }
           ]
          },
          {
            label: "Klinik Bilimler",
            children: [{
              label: "Genel Cerrahi",
              children: [
                {
                  label: "Ders 1",
                  id: "xxxxx"
                },
                {
                  label: "Ders 2",
                  id: "xxxxx"
                },
                // continue data...
              ]
            }]
          }
        ]
      },
      {
        label: "DUS",
        children: [
            {
            label: "Klinik Bilimler",
            children: [
                {
                label: "Endodonti",
                children: [
                    {
                    label: "Ders 1",
                    id: "xxxx"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

你们有没有遇到过类似的事情？如果是这样，您是如何编写代码的？

非常感谢

【问题讨论】：

  • 请添加有效数据。给定的数组无效。
  • 对不起，你可以看看jsfiddle.net/gk5aofrm/1，非常感谢。

标签： javascript arrays json object nested


【解决方案1】：

你可以为分组标签取一个对象。

const
    data = [{ _id: "5e7f4d61236c2257490064b4", status: true, name: "Biyokimya", type: [{ _id: "5e7a78bc07c289220864436e", name: "TUS", __v: 0 }], __v: 0, branch: [216, 222, 212], end_date: "2021-09-30T21:00:00.000Z", grade: [2022, 2020], start_date: "2020-10-25T18:47:54.896Z", subtype: [{ _id: "5f948e39a506ab395ea61f77", name: "Temel Bilimler", __v: 0 }], year: 2019, videos: [{ _id: "5eb9559389972764a79aa814", live: false, medianova: true, status: true, name: "Ders 1", link: "416924989", start_date: "2020-05-11T13:39:11.000Z", end_date: "2021-05-11T13:39:13.000Z", category: "5e7f4d61236c2257490064b4", __v: 0 }, { _id: "5eb955a089972764a79aa815", live: false, medianova: true, status: true, name: "Ders 2", link: "416925154", start_date: "2020-05-11T13:39:11.000Z", end_date: "2021-05-11T13:39:13.000Z", category: "5e7f4d61236c2257490064b4", __v: 0 }, { _id: "5eb955ad89972764a79aa816", live: false, medianova: true, status: true, name: "Ders 3", link: "416925143", start_date: "2020-05-11T13:39:11.000Z", end_date: "2021-05-11T13:39:13.000Z", category: "5e7f4d61236c2257490064b4", __v: 0 }, { _id: "5eb955b789972764a79aa817", live: false, medianova: true, status: true, name: "Ders 4", link: "416925130", start_date: "2020-05-11T13:39:11.000Z", end_date: "2021-05-11T13:39:13.000Z", category: "5e7f4d61236c2257490064b4", __v: 0 }, { _id: "5eb955c289972764a79aa818", live: false, medianova: true, status: true, name: "Ders 5", link: "416925116", start_date: "2020-05-11T13:39:11.000Z", end_date: "2021-05-11T13:39:13.000Z", category: "5e7f4d61236c2257490064b4", __v: 0 }] }, { _id: "5e8b9489f9ae7734dc061419", status: true, name: "Endodonti", type: [{ _id: "5e7a78c007c289220864436f", name: "DUS", __v: 0 }], __v: 0, branch: [212, 462], end_date: "2021-10-30T21:00:00.000Z", grade: [2023, 2022], start_date: "2020-10-29T19:17:53.649Z", subtype: [{ _id: "5f948e3da506ab395ea61f78", name: "Klinik Bilimler", __v: 0 }], videos: [{ _id: "5eb5eccf89972764a79aa7f6", live: false, medianova: true, status: true, name: "Ders 1", link: "416513498", start_date: "2020-05-08T23:35:25.000Z", end_date: "2021-05-08T23:35:26.000Z", category: "5e8b9489f9ae7734dc061419", __v: 0 }], year: 2020 }, { _id: "5eac095789972764a79aa675", status: true, name: "Anatomi", type: [{ _id: "5e7a78bc07c289220864436e", name: "TUS", __v: 0 }], __v: 0, branch: [212, 216, 462], end_date: "2021-09-30T21:00:00.000Z", grade: [2025], start_date: "2020-10-25T14:24:26.866Z", subtype: [{ _id: "5f948e39a506ab395ea61f77", name: "Temel Bilimler", __v: 0 }], year: 2020, videos: [{ _id: "5eac09ae89972764a79aa676", live: false, medianova: true, status: true, name: "Ders 1", link: "413260985", start_date: "2020-05-01T11:36:02.000Z", end_date: "2021-05-01T11:36:04.000Z", category: "5eac095789972764a79aa675", __v: 0 }, { _id: "5eac09d989972764a79aa677", live: false, medianova: true, status: true, name: "Ders 2", link: "413263273", start_date: "2020-05-01T11:36:02.000Z", end_date: "2021-05-01T11:36:04.000Z", category: "5eac095789972764a79aa675", __v: 0 }, { _id: "5eac09ef89972764a79aa678", live: false, medianova: true, status: true, name: "Ders 3", link: "413263244", start_date: "2020-05-01T11:36:02.000Z", end_date: "2021-05-01T11:36:04.000Z", category: "5eac095789972764a79aa675", __v: 0 }, { _id: "5eac0a1c89972764a79aa679", live: false, medianova: true, status: true, name: "Ders 4", link: "413263225", start_date: "2020-05-01T11:36:02.000Z", end_date: "2021-05-01T11:36:04.000Z", category: "5eac095789972764a79aa675", __v: 0 }] }, { _id: "5eb13e9289972764a79aa760", status: true, name: "Genel Cerrahi", type: [{ _id: "5e7a78bc07c289220864436e", name: "TUS", __v: 0 }], __v: 0, branch: [212, 424, 442, 462], end_date: "2021-10-30T21:00:00.000Z", grade: [2022, 2024], start_date: "2020-10-29T19:18:20.053Z", subtype: [{ _id: "5f948e3da506ab395ea61f78", name: "Klinik Bilimler", __v: 0 }], videos: [{ _id: "5eb13ed389972764a79aa761", live: false, medianova: true, status: true, name: "Ders 1", link: "414555752", start_date: "2020-05-05T10:24:08.000Z", end_date: "2021-05-05T10:24:09.000Z", category: "5eb13e9289972764a79aa760", __v: 0 }, { _id: "5eb13ee589972764a79aa762", live: false, medianova: true, status: true, name: "Ders 2", link: "414555748", start_date: "2020-05-05T10:24:08.000Z", end_date: "2021-05-05T10:24:09.000Z", category: "5eb13e9289972764a79aa760", __v: 0 }, { _id: "5eb13ef189972764a79aa763", live: false, medianova: true, status: true, name: "Ders 3", link: "414555739", start_date: "2020-05-05T10:24:08.000Z", end_date: "2021-05-05T10:24:09.000Z", category: "5eb13e9289972764a79aa760", __v: 0 }], year: 2020 }],
    labels = ['year', 'type', 'subtype', 'name'],
    result = data.reduce((r, o) => {
        labels
            .reduce((level, key) => {
                const label = Array.isArray(o[key]) ? o[key][0].name : o[key];
                let temp = level.find(q => q.label === label)
                if (!temp) level.push(temp = { label, children: [] });
                return temp.children;
            }, r)
            .push(...o.videos.map(({ name: label, _id: id }) => ({ label, id })));
        return r;
    }, []);

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

【讨论】：

    猜你喜欢
    • 2021-01-19
    • 1970-01-01
    • 2019-02-03
    • 2021-01-14
    • 2016-06-02
    • 2021-06-14
    • 2022-01-13
    • 1970-01-01
    • 2022-10-12
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode