如何从JavaScript中的数组中删除对象？

Question

I have two arrays totalArray and selectionArray , these values are always dynamic but for example purpose I given below that arrays, Now I want to remove selectionArray from totalArray using id not index because I have only five values per page. so if I remove value using index then it is removing values from other page also because page wise index is same found. so how to remove object using id? I use splice but is using other methods or any other solution available?

  totalArray = [
     {id: 1, city: 'LONDON'},
     {id: 2, city: 'PARIS'},
     {id: 3, city: 'NEW YORK'},
     {id: 4, city: 'BERLIN'},
     {id: 5, city: 'MADRID'},
     {id: 6, city: 'ROME'},
     {id: 7, city: 'DUBLIN'},
     {id: 8, city: 'ATHENS'},
     {id: 9, city: 'ANKARA'},
     {id: 10, city: 'MOSCOW'},
  ]      

   selectionArray = [
     {id: 6, city: 'ROME'},
     {id: 7, city: 'DUBLIN'},
     {id: 8, city: 'ATHENS'},
     {id: 9, city: 'ANKARA'},
     {id: 10, city: 'MOSCOW'},
  ]

  selectionArray.forEach((item, i) => { 
      totalArray.splice(item.id, 1);
  });

Answer 1

Assuming you want to alter the original array , here is a solution following this approach:

• Acquire the id of the looped item selectionArray, taking advantage of array.forEach .
• Find, in total array, the element with the same index of the looped one.
• Acquire its index, and splice the element from the array.

This should be pretty similar to what you've tried to achieve with your code, I've tried to stay as close as possible to your try.

 const totalArray = [ {id: 1, city: 'LONDON'}, {id: 2, city: 'PARIS'}, {id: 3, city: 'NEW YORK'}, {id: 4, city: 'BERLIN'}, {id: 5, city: 'MADRID'}, {id: 6, city: 'ROME'}, {id: 7, city: 'DUBLIN'}, {id: 8, city: 'ATHENS'}, {id: 9, city: 'ANKARA'}, {id: 10, city: 'MOSCOW'}, ], selectionArray = [ {id: 6, city: 'ROME'}, {id: 7, city: 'DUBLIN'}, {id: 8, city: 'ATHENS'}, {id: 9, city: 'ANKARA'}, {id: 10, city: 'MOSCOW'}, ]; selectionArray.forEach(({id: uid}) => { totalArray.splice( totalArray.indexOf(totalArray.find(({id}) => uid === id)), 1 ); }); console.log(totalArray); 

Please note that if both array elements comes from the same array source you can simply use indexOf .

Answer 2

This might not be the best option. Basically it cycles both arrays and when the id is matching it removes the key from the first array

 totalArray = [ {id: 1, city: 'LONDON'}, {id: 2, city: 'PARIS'}, {id: 3, city: 'NEW YORK'}, {id: 4, city: 'BERLIN'}, {id: 5, city: 'MADRID'}, {id: 6, city: 'ROME'}, {id: 7, city: 'DUBLIN'}, {id: 8, city: 'ATHENS'}, {id: 9, city: 'ANKARA'}, {id: 10, city: 'MOSCOW'}, ] selectionArray = [ {id: 1, city: 'LONDON'}, {id: 7, city: 'DUBLIN'}, {id: 8, city: 'ATHENS'}, {id: 9, city: 'ANKARA'}, {id: 10, city: 'MOSCOW'}, ] for (key in totalArray){ for (removeKey in selectionArray){ if (totalArray[key].id == selectionArray[removeKey].id){ totalArray.splice(key,1) } } } console.log(totalArray) 

Answer 3

You can use Array#filter to remove items from an array. Combine this with Array#every you can ensure that the item is not found in the removal array.

 const totalArray = [ { id: 1, city: "LONDON" }, { id: 2, city: "PARIS" }, { id: 3, city: "NEW YORK" }, { id: 4, city: "BERLIN" }, { id: 5, city: "MADRID" }, { id: 6, city: "ROME" }, { id: 7, city: "DUBLIN" }, { id: 8, city: "ATHENS" }, { id: 9, city: "ANKARA" }, { id: 10, city: "MOSCOW" } ]; const selectionArray = [ { id: 6, city: "ROME" }, { id: 7, city: "DUBLIN" }, { id: 8, city: "ATHENS" }, { id: 9, city: "ANKARA" }, { id: 10, city: "MOSCOW" } ]; const remainingArray = totalArray.filter(city => selectionArray.every(selCity => selCity.id !== city.id) ); console.log(remainingArray); 

The filter function works by calling a callback for each item. If the callback returns true the item is kept. If the callback returns false the item is removed. The function returns the remaining values.

The every function works by calling a callback for each item in the array. If the callback returns true for all item in the array, the function returns true . If the callback returns false for any item then the function returns false .

For every city in totalArray , we check to see if the id is not in every single one of the cities from selectionArray .

Answer 4

 const totalArray = [ {id: 1, city: 'LONDON'}, {id: 2, city: 'PARIS'}, {id: 3, city: 'NEW YORK'}, {id: 4, city: 'BERLIN'}, {id: 5, city: 'MADRID'}, {id: 6, city: 'ROME'}, {id: 7, city: 'DUBLIN'}, {id: 8, city: 'ATHENS'}, {id: 9, city: 'ANKARA'}, {id: 10, city: 'MOSCOW'}, ]; const selectionArray = [ {id: 6, city: 'ROME'}, {id: 7, city: 'DUBLIN'}, {id: 8, city: 'ATHENS'}, {id: 9, city: 'ANKARA'}, {id: 10, city: 'MOSCOW'}, ]; // Using splice // We loop over the "selectionArray" and use .findIndex() to find the index of each object. const result_splice = [ ...totalArray ]; selectionArray.forEach( selection => { const index_in_totalArray = result_splice.findIndex( total => total.id === selection.id ); result_splice.splice( index_in_totalArray, 1 ); }); console.log( 'RESULT_SPLICE' ); console.log( result_splice ); // Using .filter(); // We extract all the selected ids and then .filter() the "totalArray" to remove // all items with an id found inside "selected_ids" const selected_ids = selectionArray.map( selection => selection.id ); const result_includes = totalArray.filter( total => !selected_ids.includes( total.id )); console.log( 'RESULT_INCLUDES' ); console.log( result_includes ); // Using .find() // Almost the same as using .filter(), but instead of extracting the ids beforehand, we just loop over the "selectedArray" with .find() const result_find = totalArray.filter( total => { return !selectionArray.find( selection => selection.id === total.id ); }); console.log( 'RESULT_FIND' ); console.log( result_find ); const json_splice = JSON.stringify( result_splice ); const json_includes = JSON.stringify( result_includes ); const json_find = JSON.stringify( result_find ); console.log( 'All results are equal:' );json_find && console.log( json_splice === json_includes && json_splice === json_find && json_includes === json_find ); 

Answer 5

Fastest and simplest way will be:

 const totalArray = [ { id: 1, city: 'LONDON' }, { id: 2, city: 'PARIS' }, { id: 3, city: 'NEW YORK' }, { id: 4, city: 'BERLIN' }, { id: 5, city: 'MADRID' }, { id: 6, city: 'ROME' }, { id: 7, city: 'DUBLIN' }, { id: 8, city: 'ATHENS' }, { id: 9, city: 'ANKARA' }, { id: 10, city: 'MOSCOW' }, ] const selectionArray = [ { id: 6, city: 'ROME' }, { id: 7, city: 'DUBLIN' }, { id: 8, city: 'ATHENS' }, { id: 9, city: 'ANKARA' }, { id: 10, city: 'MOSCOW' }, ]; const ids = selectionArray.map(({ id }) => id); const filteredArray = totalArray.filter(({ id }) => !ids.includes(id)); console.log(filteredArray); 

Answer 6

in javascript you could get the index of a value using next:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

then to remove the that item:

arr.splice(a, 1);

Hope it could help if not please see:

Love2Dev Removing Array Items By Value Using Splice