Compare two lists and remove common elements using angular js

Question

I am having 2 lists like below

list1 = ['option1','option2','option3','option4','option5','option6','option7'];

list2 = ['option3', 'option4', 'option7'];

I want the list to be

listFinal = ['option1','option2','option5','option6','option7'];

Please give me the suggestion using angular js how to solve this using filter

Tried to use this code to solve this using filter but unable to succeed.

app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [], 
          keys = [];

  angular.forEach(collection, function(item) {
      var key = item[keyname];
      if(keys.indexOf(key) === -1) {
          keys.push(key);
          output.push(item);


     }
      });
      return output;
   };
});

You could use `underscore`/`loadash` js for doing such a thing..they had an various sets of method for doing this — Pankaj Parkar, Oct 19 '15 at 17:21

score 1 · Answer 1 · answered Oct 19 '15 at 18:20

I'm not sure that you really want a filter here. This is something that you should probably solve outside of Angular. If you're willing to add lodash to your project, you could do this:

var diff = _.difference(array1, array2);

If you must use a filter, you could try something like this?

app.filter('difference', function() {
     return function(input, diff_array) {
        var result = [];
        for (var i = 0; i < input.length; i++) {
            if (diff_array.indexOf(input[i]) == -1) {
                result.push(input[i]);
            }
        }
        return result;
     }
 }

Note that if you do this, your template has to look something like:

{{ input | difference:diff_arr }}

I haven't actually tested any of this, but this should be the general idea. I concur with Phillip that this really isn't something you should try to solve in Angular.

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

What you are describing is an "array/set difference". There are many questions on StackOverflow asking about this already. This is not related to Angular.js, but is an problem with an algorithmic solution. Just to add bit of interesting material, a "naive" solution runs in O(nlogn) which would be:

Sort the two lists/arrays from lowests to highest
Traverse each array setting the internal pointer to 0 initially, compare the elements. If the element in Array A is larger than the on in Array B advance the pointer by 1 in Array B, else B, else if they are equal, remove the result from the array and advance both pointers

What is the fastest or most elegant way to compute a set difference using Javascript arrays?

JavaScript array difference

edited May 23 '17 at 12:14

Community

1
1

answered Oct 19 '15 at 17:23

q.Then

2,743
1
21
31

Cant we do the same thing using filter – Kartheek Sarabu Oct 19 '15 at 17:40
Yes just add this as a callback function into your filter. The function is called whenever the filter is used. You don't need to (or have to actually since there is none) "angular" way, just apply the filter when needed (I can't see from your code whether or not you are manipulating the view from the controller or the DOM does some event and triggers a function) – q.Then Oct 19 '15 at 17:42

Compare two lists and remove common elements using angular js

2 Answers2