How to group same value elements in a Javascript object?

Question

This is my object and I want to create a menu from the submenu in it.

I am working on a project that needs to categorize the menu list groups by their parent name.

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

I have tried the Javascript code below

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

I am getting the list of the items like this

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

but I want to group it by the parent so I want to produce this

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

Please, any one to assist me get the menu in the form of parent and children.

Possible duplicate of [How to convert a Single Array into a multidimensional array in PHP?](https://stackoverflow.com/questions/19911822/how-to-convert-a-single-array-into-a-multidimensional-array-in-php) — Salim Djerbouh, Oct 01 '19 at 15:07
Is this code in php ? Please check your syntax and please edit your question — Vahe Galstyan, Oct 01 '19 at 15:08
for starters, check your desired html structure. `
` is supposed to **wrap** the `
`s, not precede them. e.g. `
item1
item 2
` — Erich, Oct 02 '19 at 02:15
Ok thanks. I have edited the question. Can you help me out with the solution? — Opoku Debrah, Oct 02 '19 at 06:14

Alberto Trindade Tavares · Accepted Answer · 2019-10-02T14:45:04.003

You can use reduce to group your data by 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);

Then you can the use groupedData to produce the menu in the way you want. If you need, you can get the parent names from groupedData by calling Object.keys(groupedData). With this, you can decide the order of the parents you want to display. You could sort them alphabetically, for example.

How to group same value elements in a Javascript object?

1 Answers1