How can I remove elements of a nested array and retain original structure?

Question

I am working on a new Angular Application and I am building a dropdown navigation. I am currently using a Factory to return the array of nav items within the controller like so:

var sections = this.NavMenusFactory.sections;

The structure of the menu looks like so:

I need to cycle through the array and remove any items that the user does not have permissions to access but also retain the original structure. This is dictated by the current user and the requiredPermissions index within the array objects.

I have access to the lodash library so have been playing around with this by trying out filter and remove functions. Nothing is working exactly how I need it. To give a quick example of how I am trying to do it:

var sections = this.NavMenusFactory.sections;
this.dropdownNavItems = [];
 forEach(sections, (section) => {
      if (section.section === 'financials') {
        this.dropdownNavItems = this.dropdownNavItems.concat(section.pages.filter(navitem => {
          // console.log("section", navitem);
          return !navitem.requiredPermissions || this.Permissions.parseAccessByValue(selectedVehicle, navitem.requiredPermissions);
        }));
      }
    });

I'm not able to retain the original structure like in the image just with the items removed. I am very new to Javascript so some guidance would be much appreciated.

Answer 1

Your code looks correct to me, and I would suggest that your issue is actually more likely an angular related one.

Assuming you are using ng-repeat to iterate over all the results, chances are that your issue involves the 'track by' part of ng-repeat . Please see this part of the ng-repeat docs You could try using track by item.name or something similar, see if that solves your problems.