Filter out objects from another array in a loop

Question

I have an allItems array of objects

allItems = [
    { id: 1, name: 'item1' },
    { id: 2, name: 'item2' },
    { id: 3, name: 'item3' }
]

I want it to filter out and not contain the objects contained in another array from my component.

fewItems = [
    { id: 2, name: 'item2' }
]

so, filteredItems should be :

filteredItems = [
    { id: 1, name: 'item1' },
    { id: 3, name: 'item3' }
]

And when another object from allItems is added to fewItems, it needs to disappear from the filteredItems one.

I would like to do this in pure vanilla JS, with no specific library.

Thanks ahead !

Do you want to be able to do this with just JavaScript or with a library? — Chris, Oct 23 '17 at 17:32
@Chris you're right I should have specified this in the question. Edited again. — Jeremy Belolo, Oct 23 '17 at 18:22
@JeremyBelolo I think you made a much better question with those simple changes. — Chris, Oct 24 '17 at 14:14

Richard Medeiros · Accepted Answer · 2017-10-23T18:08:42.133

2

filteredItems =  this.allItems.filter(x => {
    return !this.fewItems.some(y => JSON.stringify(y) == JSON.stringify(x))
});

edited Oct 23 '17 at 18:08

answered Oct 23 '17 at 17:57

Richard Medeiros

938
9
18

3

just be carefull with stringify https://stackoverflow.com/questions/15376185/is-it-fine-to-use-json-stringify-for-deep-comparisons-and-cloning. – Nick Timmer Oct 23 '17 at 18:20

Sajeetharan · Answer 2 · 2017-10-23T18:13:58.130

1

var allItems = [
    { id: 1, name: 'item1' },
    { id: 2, name: 'item2' },
    { id: 3, name: 'item3' }
];

var fewItems = [
    { id: 2, name: 'item2' }
];

var result3 = _(allItems) 
        .differenceBy(fewItems, 'id', 'name')
        .map(_.partial(_.pick, _, 'id', 'name'))
        .value();

console.log(result3);

<script src='https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js'></script>

EDIT

Without Lodash

var allItems = [
    { id: 1, name: 'item1' },
    { id: 2, name: 'item2' },
    { id: 3, name: 'item3' }
];

var fewItems = [
    { id: 2, name: 'item2' }
];


var props = ['id', 'name'];
var result = allItems.filter(function(o1){
     return !fewItems.some(function(o2){
        return o1.id === o2.id;        
    });
}).map(function(o){
     return props.reduce(function(newo, name){
        newo[name] = o[name];
        return newo;
    }, {});
});

console.log(result);

edited Oct 23 '17 at 18:13

answered Oct 23 '17 at 17:24

Sajeetharan

216,225
63
350
396

Hey, thanks for this... But I don't like the idea of integrating lodash in an Angular app. I would really like to do it without, if at all possible. – Jeremy Belolo Oct 23 '17 at 17:31
1

@JeremyBelolo check the solution without lodash, edited answer – Sajeetharan Oct 23 '17 at 18:14
So you say it's an Angular app? so probably best to use Angular's Comparison methods for equality, since you don't wnat to use Lodash: https://docs.angularjs.org/api/ng/function/angular.equals I thought you put in original quesiton Angular but now it's gone. – Nick Timmer Oct 23 '17 at 18:31

score 1 · Answer 3 · answered Oct 23 '17 at 17:49

var allItems = [
     { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' }
    ];
    
    var fewItems = [
        { id: 2, name: 'item2' }
    ];
    
    var keys = Object.keys( fewItems[0] ) 
    
    var result = allItems.filter( 
      function(item){ 
        for( var k = fewItems.length-1; k>=0; --k){ 
          var dontWant = fewItems[k]; 
          var i=keys.length-1; 
          for( ; i>=0; --i ){ 
            if( dontWant[keys[i]] != item[keys[i]]){  break; } 
          } 
          if( i == -1){ return false;} 
        } 
        return true; 
      }
    );

    console.log(result)

score 1 · Answer 4 · answered Oct 23 '17 at 17:51

Pure JS solution

var allItems = [
  { id: 1, name: 'item1' },
  { id: 2, name: 'item2' },
  { id: 3, name: 'item3' }
];

var fewItems = [
  { id: 2, name: 'item2' }
];

var result3 = allItems
  .filter(item => {
    for(let restrictedItem of fewItems) {
      if (JSON.stringify(restrictedItem) === JSON.stringify(item)) {
        return false;
      }
    }
    return true;
  })

console.log(result3);

Filter out objects from another array in a loop

4 Answers4