Filter nested JSON in angular

Question

I have mega menu that generate from JSON object like this:

[  
   {  
      "name":"Menu Item 1",
      "id":"8",
      "children":[  
         {  
            "name":"Sub Menu 1-1",
            "id":"1",
            "children":[  
               {  
                  "name":"Sub Menu 1.1.1",
                  "id":"2"
               },
               {  
                  "name":"Sub Menu 1.1.2",
                  "id":"3"
               }
            ]
         },
         {  
            "name":"Sub Menu 1.2",
            "id":"4"
         }
      ]
   },
   {  
      "name":"Menu Item 2",
      "id":"7",
      "children":[  
         {  
            "name":"Sub Menu 2.1",
            "id":"5"
         },
         {  
            "name":"Sub Menu 2.2",
            "id":"6"
         }
      ]
   }
]

How can I create a custom filter to retrieve only the matched items by their name recursively without changing the original structure?

Anson · Accepted Answer · 2016-07-04 08:42:03Z

Try this.

var menuItems =[{ name: 'Menu Item 1', id: '8', children:[{ name: 'Sub Menu 1-1', id: '1', children: [{ name: 'Sub Menu 1.1.1', id: '2' }, { name: 'Sub Menu 1.1.2', id: '3' }] }, { name: 'Sub Menu 1.2', id: '4' }]},{ name: 'Menu Item 2', id: '7', children: [{ name: 'Sub Menu 2.1', id: '5' }, { name: 'Sub Menu 2.2', id: '6' }] }];

var result = [];

function isObject(obj) {
  return (!!obj.name && !!obj.id);
}

function hasChildren(obj) {
  return !!obj.children && Array.isArray(obj.children);
}

function getNameList(item, matchName) {
  if(Array.isArray(item)) {
    for(var i = 0; i < item.length; i++) {
      if(hasChildren(item[i])) {
        getNameList(item[i].children, matchName);
      }
      if(isObject(item[i])) {
        if(matchName == item[i].name) result.push(item[i]);
      } 
    }
  }
}

getNameList(menuItems, 'Menu Item 1');

console.log(result);

Collectives™ on Stack Overflow

Filter nested JSON in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related