Angular How to group an array of objects using a value key-CodePudding

I've the below array, I want to group by section_name in html, also I want to check first if array of section_name value length greater than zero then show the html and display the result grouping by section_name I hope you understand what I mean

"_id": "63346a5c8f7787337d09dd29",
"chapter": "6333119248004d54023a4747",
"title": "  sorting in math ",
"sort_order": 1,
"is_published": true,
"__v": 0,
"assets": [
    {
    "_id": "63397cd1aca771c40858262c",
    "lecture": "63346a5c8f7787337d09dd29",
    "description": "download the powerpoint slides",
    "section_name": "lecture_explenation",
    "file_type": "ppt",
    "file_name": "http://127.0.0.1:3000/public/uploads/assets/Kate-Â·-SlidesCarnival.pptx-1664711889777.pptx",
    "__v": 0
    },
    {
    "_id": "63397d70aca771c40858263a",
    "lecture": "63346a5c8f7787337d09dd29",
    "description": "download zip file   ",
    "section_name": "lecture_explenation",
    "file_type": "zip",
    "file_name": "http://127.0.0.1:3000/public/uploads/assets/p.zip-1664712048665.zip",
    "__v": 0
    }
    {
        "_id": "63397cd1aca771c40858262c",
        "lecture": "63346a5c8f7787337d09dd29",
        "section_name": "lecture_exercise",
        "file_type": "docs",
        "file_name": "http://127.0.0.1:3000/public/uploads/assets/Kate-Â·-SlidesCarnival.pptx-1664711889777.pptx",
    
        "__v": 0
        },
]
}

CodePudding user response：

const assets =  this.lecture.assets.reduce(function (r, a) {
    r[a.section_name] = r[a.section_name] || [];
    r[a.section_name].push(a);
    return r;
}, Object.create(null));

  console.log(assets.lecture_explenation);

CodePudding user response：

For this you can use Array#reduce or you can use lodash library and use GroupBy