Custom angular filter

Question

I am trying to filter data similar to the following:

data = {
  ABC: "Lorem Ipsum lorem lorem",
  DEFG: "Lorem Ipsum lorem lorem",
  HI: "Lorem Ipsum lorem lorem",
  JK: "Lorem Ipsum lorem lorem"
}

against an array such as:

myArray = ["HI","LMN","ABC"]

I am trying to return the pairs for which the key is not present in myArray

I have tried the following with no success:

$scope.filteredResults = $filter("filter")(data, function (val, index) {
  for (var i = 0; i < myArray.length; i++) {
    if (index === myArray[i]) {
      return false
    }
  }
  return true
})

Honestly, this is just a general JavaScript Array.prototype.filter question... — Mr. Polywhirl
– Mr. Polywhirl, Commented Apr 28, 2015 at 11:49
Do you have an angular filter named "filter"? $filter is a service for getting existing filters, you define a new one using the module.filter() syntax. — doldt
– doldt, Commented Apr 28, 2015 at 11:49
Shouldn't data be an array? The filter's first parameter must be an Array according to the docs. Is this correct? — Mr. Polywhirl
– Mr. Polywhirl, Commented Apr 28, 2015 at 12:11

Mr. Polywhirl · Accepted Answer · 2015-04-28 12:13:12Z

1

If the index of the Object is its key then you can just check if it exists in the array by using Array.prototype.indexOf. I am assuming that index is the object's key?

$scope.filteredResults = $filter("filter")(data, function(val, index) {
  return myArray.indexOf(index) === -1;
})

If you want to return a filtered object, excluding any keys that are present in the filter list, you can filter by keys and then reduce the object based on the allowed keys.

Here's a pure JavaScript implementation of filtering an object with a blacklist.

var data = {
  ABC: "Lorem Ipsum lorem lorem",
  DEFG: "Lorem Ipsum lorem lorem",
  HI: "Lorem Ipsum lorem lorem",
  JK: "Lorem Ipsum lorem lorem"
};
var blackList  = ["HI", "LMN", "ABC"];

var filtered = Object.keys(data).filter(function(key) {
  return blackList.indexOf(key) === -1;
}).reduce(function(result, key) {
  result[key] = data[key];
  return result;
}, {});

document.body.innerHTML = JSON.stringify(filtered, null, '  ');

body { white-space: pre; font-family: monospace; }

edited Apr 28, 2015 at 12:13

answered Apr 28, 2015 at 11:59

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

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

1 Comment

Jamie Kudla Over a year ago

I was so caught up with angulars filtering that I forgot about proto filter... Thank you

Vamsi · Accepted Answer · 2015-04-28 12:12:52Z

1

If you are doing this in controller, why not just do it in plain JavaScript?

FYI: Doing these simple things in Plain JavaScript will be faster than doing it in Angular Utilities.

var data = {
  ABC: "Lorem Ipsum lorem lorem",
  DEFG: "Lorem Ipsum lorem lorem",
  HI: "Lorem Ipsum lorem lorem",
  JK: "Lorem Ipsum lorem lorem"
};

var myArray = ["HI", "LMN", "ABC"];
var keys = Object.keys(data);

var result = {};

for (var i = 0; i < keys.length; i++) {
  if (myArray.indexOf(keys[i]) == -1) {
    result[keys[i]] = data[keys[i]];
  }
}

document.body.innerHTML = JSON.stringify(result);

edited Apr 28, 2015 at 12:12

answered Apr 28, 2015 at 12:06

Vamsi

9,8006 gold badges40 silver badges46 bronze badges

Collectives™ on Stack Overflow

Custom angular filter

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related