如何在 Javascript 对象中对相同的值元素进行分组？答案

【问题标题】：How to group same value elements in a Javascript object?如何在 Javascript 对象中对相同的值元素进行分组？
【发布时间】：2019-10-01 14:59:26
【问题描述】：

这是我的对象，我想从其中的子菜单中创建一个菜单。

我正在处理一个需要按父名称对菜单列表组进行分类的项目。

[
    {
        "parent": "Assessment",
        "name": "Assessment Due date"
    },
    {
        "parent": "Assessment",
        "name": "Grading Schemes"
    },
    {
        "parent": "Registration",
        "name": "Manual Grouping"
    }
]

我已经尝试了下面的 Javascript 代码

jQuery(document).ready(function ($) {
    $(document).on('change','#parentMenu', function () {
        console.log("It has changed");
        var ParentMenuId = $(this).val();
        // console.log(ParentMenuId);
        $.ajax({
            type:'get',
            url: '{!! URL::route('submenu') !!}',
            data: { 'id': ParentMenuId },
            dataType:'json',
            success: function (data) {
                $("#submenulist").empty();
                data.forEach(function (element) {
                    $("#submenulist").append('<li><a href="#">'+ element.name +'</a></li>');
                })
            }
        });
    });
});

我正在获取这样的项目列表

<li>Assessment Due date</li>
<li>Grading Schemes<li>
<li>Manual Grouping<li>

但我想按父级分组，所以我想生成这个

<ul>Assessment<\ul>
<li>-Assessment Due date</li>
<li>-Grading Schemes</li>
<ul>Registration</ul>
<li>-Manual Grouping</li>

请任何人帮助我获取父母和孩子形式的菜单。

【问题讨论】：

How to convert a Single Array into a multidimensional array in PHP?的可能重复
这段代码在 php 中吗？请检查您的语法并编辑您的问题
对于初学者，请检查您想要的 html 结构。 <ol> 应该包装 <li>s，而不是在它们之前。例如<ol><li>item1</li><li>item 2</li></ol>
好的，谢谢。我已经编辑了这个问题。你能帮我解决一下吗？
@CaddyDZ 你能帮我吗？

标签： javascript jquery html

【解决方案1】：

您可以使用reduce 将您的数据按parent 分组：

const data = [
    {
        "parent": "Assessment",
        "name": "Assessment Due date"
    },
    {
        "parent": "Assessment",
        "name": "Grading Schemes"
    },
    {
        "parent": "Registration",
        "name": "Manual Grouping"
    }
];

const groupedData = data.reduce((acc, curr) => {
  (acc[curr.parent] = acc[curr.parent] || []).push(curr);
  return acc;
}, {});

console.log(groupedData);

然后您可以使用groupedData 以您想要的方式生成菜单。如果需要，您可以通过调用Object.keys(groupedData) 从groupedData 获取父名称。有了这个，您可以决定要显示的父母的顺序。例如，您可以按字母顺序对它们进行排序。

【讨论】：