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

What is the method for selecting an element using CSS code in Protractor?

Guide on incorporating one element into another with jquery

Create a request for an update by utilizing Axios within a React and Material UI environment

Is there a way to retrieve all documents based on the start and end of a specific day?

What exactly do bootstrap, javascript, jquery, and ajax entail?

Add a text to the values in a column of a table when the IDs are the same

Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

Troubleshooting: Issues with Adding a New Row in Datatables using JQuery

Error encountered when attempting to have multiple chrome.runtime.onMessage listeners - port disconnection issue

React is unable to assign a class field beyond the scope of axios

How to eliminate a hyperlink from an HTML element with the help of JQuery

Issue with Vue-Validator form validation not functioning properly on JS Fiddle

sending a parameter in the reverse url using JavaScript

Bootstrap4 does not support the <button> element

Looking to create an Ajax Control Toolkit AutoCompleteExtender with results that are "similar"?

Unspecified tag name attribute in Vue that can be accessed in the browser

Endless Loop Issue with Google Maps API Integration in NextJS-React

Activate the Chrome Extension that allows you to open a link in a new tab with just a middle click or regular click, without closing the popup

Trouble is arising in rendering events with years before 100 (specifically years 0000 - 0099) when using the ISO8601 format in fullCalendar

Toggle the active class on the parent element when it is clicked