Iterate through an array to extract specific objects and exclude them from another array

Question

Iterate through an array to extract specific objects and exclude them from another array

Within my code, I have an array named allItems that stores objects.

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

I am seeking a way to filter out the objects from this array that are also present in another array within my component.

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

This means that the resulting array filteredItems should look like this:

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

If any additional object from allItems is subsequently added to fewItems, it should automatically disappear from the filteredItems array.

I aim to achieve this using vanilla JavaScript, without relying on any specific library.

Thank you in advance for your help!

javascript arrays

Answer 1

Answer №1

selectedItems =  this.allItems.filter(a => {
    return !this.selectedFew.some(b => JSON.stringify(b) === JSON.stringify(a))
});

Answer 2

selectedItems =  this.allItems.filter(a => {
    return !this.selectedFew.some(b => JSON.stringify(b) === JSON.stringify(a))
});

Answer 3

Answer №2

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)

Answer 4

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)

Answer 5

Answer №3

JavaScript only solution

var allProducts = [
  { id: 1, name: 'product1' },
  { id: 2, name: 'product2' },
  { id: 3, name: 'product3' }
];

var fewProducts = [
  { id: 2, name: 'product2' }
];

var finalProducts = allProducts
  .filter(product => {
    for(let restrictedProduct of fewProducts) {
      if (JSON.stringify(restrictedProduct) === JSON.stringify(product)) {
        return false;
      }
    }
    return true;
  })

console.log(finalProducts);

Answer 6

JavaScript only solution

var allProducts = [
  { id: 1, name: 'product1' },
  { id: 2, name: 'product2' },
  { id: 3, name: 'product3' }
];

var fewProducts = [
  { id: 2, name: 'product2' }
];

var finalProducts = allProducts
  .filter(product => {
    for(let restrictedProduct of fewProducts) {
      if (JSON.stringify(restrictedProduct) === JSON.stringify(product)) {
        return false;
      }
    }
    return true;
  })

console.log(finalProducts);

Answer 7

Answer №4

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);

Answer 8

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);

Iterate through an array to extract specific objects and exclude them from another array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A guide to efficiently reusing parameter definitions in functions using JSDoc

Invoke another component to display within a React.js application

The Vue Router hooks are not being activated within the component when utilizing Typescript

Launching various modals on marker click

display dynamic graphs using json data from a php backend

How to create a Bootstrap panel that collapses on mobile devices and expands on desktop screens?

Vue Bootstrap Checkbox and <b-table> with <b-form-checkbox> components combine to provide a powerful and flexible user

Avoiding overlapping in setTimeOut when using jQuery.hover()

What is the best method for storing pug-formatted data in a database?

retrieving JSON data using ajax and processing it in PHP

Setting the borderRadius for a web view on Android Maps V3: A complete guide

Utilizing Vue.js to retrieve database information and populate input fields through select options

Utilizing Selenium to locate an element by its class name and then deleting it from the document object model through

The function of hasClass within an if statement appears to be malfunctioning

I'm looking for assistance on how to execute a render right after making a put or delete request

Leveraging IntersectionObserver to identify the video in view on the screen

Incorporating Button Value from Anchor Tag Title Upon Page Load

Can one open a unique custom pop-up before the window is about to close?

Develop interactive, reusable custom modals using React.js

Retrieving a variable within a try-catch statement