Dynamic nested menu in angular

Question

I have this object:

[
 {
    id: 1,
    child: false,
    link_type: expand
 },
 {
    id: 2,
    child: true,
    url: /home,
    link_type: direct,
    parent: 1
 },
 {
    id: 3,
    child: false,
    url: /settings,
    link_type: direct
 }
]

I want to do nesting of the object in such a way that the final output will be:

[
  {
    id: 1,
    link_type: expand,
    child: [
        {
            id: 2,
            url: /home,
           link_type: direct,
           parent: 1
        }
      ]
 },
 {
   id: 3,
   url: /settings,
   link_type: direct
 }
]

note: the orignal data has other fields I have included fields that are needed.

I have tried creating a nesting like this for parent node:

this.sideMenuService.getAll().subscribe(d => {
         console.log(JSON.stringify(d));
         let data: SideMenuList = {};
         let count = 0;
         d.forEach(e => {
            if (!e.child) {
               // console.log(count);
               // console.log(e.menu_id);
               data.menu_id = e.menu_id;
               data.displayname = e.displayname;
               data.iconcss = e.iconcss;
               data.link_type = e.link_type;
               data.sequence = e.sequence;
               data.url = e.url;
               console.log(data);
               this.sideMenuList.push(data);
               // console.log(this.sideMenuList);
               count++;
            }
         });
         console.log(this.sideMenuList);
});

But i am getting output like this:

Any help will be appreciated.

Harun Yilmaz · Accepted Answer · 2020-09-07 11:33:19Z

2

You can use Array.reduce() to iterate over the data and create a new nested array as followings.

But your data is invalid. Please note the quotation marks added to the data

const data = [{
    id: 1,
    child: false,
    link_type: "expand"
  },
  {
    id: 2,
    child: true,
    url: "/home",
    link_type: "direct",
    parent: 1
  },
  {
    id: 3,
    child: false,
    url: "/settings",
    link_type: "direct"
  },
  // This one is added to show multi-level nest
  {
    id: 4,
    child: true,
    url: "/settings",
    link_type: "direct",
    parent: 2
  }
]

const denormalized = data.reduce((acc, cur) => {
  if (!cur.parent) {
    acc.push(cur)
  }
  const children = data.filter(child => child.parent === cur.id)
  if (children.length > 0) {
    cur.children = children
  }
  return acc;

}, [])

console.log(denormalized)

edited Sep 7, 2020 at 11:33

answered Sep 7, 2020 at 11:27

Harun Yilmaz

8,5793 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rocky Shinde Over a year ago

Can you help with the source where I can find stuff like this ? Thanks in advance.

Collectives™ on Stack Overflow

Dynamic nested menu in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related