Mutated Array in AngularJS Filter

Question

I have this custom AngularJS filter containing a few conditions. In my else condition I am splicing values out of an array and returning that array.

Here's my issue: Splicing values out of the array in the else condition mutates the array, and if the if condition is invoked afterwards, it no longer processes the original complete and pristine array, but only a partial array containing the remaining indexes after it's been spliced.

How can I correct this to ensure that I'm working on a complete dataset each time the filter is run? I tried working with a copy of the array (using var newArr = items.splice(0) )in the else block, but for whatever reason the issue remains.

One option is to build a new array in the else condition and return that, rather than chipping away at the original array. However since I'm dealing with a complex multi-nested data structure, for simplicity's sake I'm looking for a solution where I can remove values.

angular.module("app", []).
filter('department', function() {
  return function(items, args) {
    var filtered;
    var output = [];

    // return all items when 'All Departments' selected              
    if (args.selectedDepartment.Name == 'All Departments' && args.selectedDepartment.Id === undefined) {
      return items;
    }

    // return orders containing products from selected department with 'Inclusive' option
    if (args.selectedDepartment.Id !== undefined && !args.option) {
      for (let i = 0; i < items.length; i++) {
        filtered = items[i].products.filter(function(item) {
          return item.Order__r.Department__r.Id == args.selectedDepartment.Id;
        });
        if (filtered.length >= 1) {
          output.push(items[i]);
        }
      }

      // return only products which are an exact match to the selected department with 'Exclusive' option
    } else if (args.selectedDepartment.Id !== undefined && args.option) {

      for (let i = 0; i < items.length; i++) {
        for (let j = 0; j < items[i].products.length; j++) {
          if (items[i].products[j].Order__r.Department__r.Id != args.selectedDepartment.Id) {
            items[i].products.splice(j, 1);
          }
        }
        if (items[i].products.length === 0) {
          items.splice(i, 1);
        }
      }

      return items;
    }
    return output;
  };
})

Answer 1

Removing an element from the given array is a mutating operation.

Another approach would be to implement a non-mutating element removal. Instead of directly modifying the input array, the remove function below could return a new array that contains all elements except the specified one:

function remove(array, element) {
    return array.filter(e => e !== element);
}
const vowelsAndX = ["a", "e", "i", "o", "u", "x"];
const vowels = remove(vowelsAndX, "x");
vowels.toString(); // "a,e,i,o,u"