What is the best way to eliminate an object from an array using JavaScript?

Question

What is the best way to eliminate an object from an array using JavaScript?

I am currently working with two arrays named totalArray and selectionArray. These arrays have dynamic values, but for the sake of example I have provided sample arrays below. My goal is to remove objects from totalArray based on their id rather than index. This is because each page only displays five values, and removing by index would affect other pages as well due to consistent indexing across pages. Is there a method besides using splice to achieve this, or is there another 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);
  });

javascript arrays

Answer 1

Answer №1

If you're looking to make changes to the original array itself, here's a solution that takes this approach:

First, get the id of each item in the selectionArray using array.forEach.
Then, locate the element with the corresponding index in the total array.
Get its index and remove the element from the array.

This solution closely mirrors what you attempted in your own code.

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

Keep in mind that if the elements in both arrays originate from the same source, you can simply use indexOf.

Answer 2

If you're looking to make changes to the original array itself, here's a solution that takes this approach:

First, get the id of each item in the selectionArray using array.forEach.
Then, locate the element with the corresponding index in the total array.
Get its index and remove the element from the array.

This solution closely mirrors what you attempted in your own code.

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

Keep in mind that if the elements in both arrays originate from the same source, you can simply use indexOf.

Answer 3

Answer №2

Perhaps there could be a more efficient solution. Essentially, this code snippet loops through both arrays, and if the id matches, it removes that element from the first array.

mainArray = [
     {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'},
  ]      

   subArray = [
     {id: 1, city: 'LONDON'},     
     {id: 7, city: 'DUBLIN'},
     {id: 8, city: 'ATHENS'},
     {id: 9, city: 'ANKARA'},
     {id: 10, city: 'MOSCOW'},
  ]
  
  for (index in mainArray){
    
    for (subIndex in subArray){
      if (mainArray[index].id === subArray[subIndex].id){
        mainArray.splice(index,1)
      }
    }
  }
  console.log(mainArray)

Answer 4

Perhaps there could be a more efficient solution. Essentially, this code snippet loops through both arrays, and if the id matches, it removes that element from the first array.

mainArray = [
     {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'},
  ]      

   subArray = [
     {id: 1, city: 'LONDON'},     
     {id: 7, city: 'DUBLIN'},
     {id: 8, city: 'ATHENS'},
     {id: 9, city: 'ANKARA'},
     {id: 10, city: 'MOSCOW'},
  ]
  
  for (index in mainArray){
    
    for (subIndex in subArray){
      if (mainArray[index].id === subArray[subIndex].id){
        mainArray.splice(index,1)
      }
    }
  }
  console.log(mainArray)

Answer 5

Answer №3

If you want to remove items from an array, you can utilize the Array#filter method. By combining this with Array#every, you can ensure that the item is not present 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 iterates through each item and executes a callback. If the callback returns true, the item is kept. If it returns false, the item is removed. The resulting array contains the remaining values.

The every function also loops through each item in the array. It returns true if the callback evaluates to true for all items, otherwise it returns false.

In this scenario, we are checking for each city in

totalArray</code to verify that its <code>id

is not found in every city of selectionArray.

Answer 6

If you want to remove items from an array, you can utilize the Array#filter method. By combining this with Array#every, you can ensure that the item is not present 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 iterates through each item and executes a callback. If the callback returns true, the item is kept. If it returns false, the item is removed. The resulting array contains the remaining values.

The every function also loops through each item in the array. It returns true if the callback evaluates to true for all items, otherwise it returns false.

In this scenario, we are checking for each city in

totalArray</code to verify that its <code>id

is not found in every city of selectionArray.

Answer 7

Answer №4

const mainCities = [
   {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 selectedCities = [
   {id: 6, city: 'ROME'},
   {id: 7, city: 'DUBLIN'},
   {id: 8, city: 'ATHENS'},
   {id: 9, city: 'ANKARA'},
   {id: 10, city: 'MOSCOW'},
];

// Using splice
// We iterate over the "selectedCities" and use .findIndex() to locate the index of each object.
const result_splice_final = [ ...mainCities ];
selectedCities.forEach( selectedCity => {
  const index_in_mainCities = result_splice_final.findIndex( main => main.id === selectedCity.id );
  result_splice_final.splice( index_in_mainCities, 1 );
});
console.log( 'RESULT_SPLICE_FINAL' );
console.log( result_splice_final );

// Using .filter();
// We extract all the selected ids and then .filter() the "mainCities" to eliminate
// all items with an id found inside "selected_ids"
const selectedIds = selectedCities.map( selected => selected.id );
const result_filtering = mainCities.filter( main => !selectedIds.includes( main.id ));
console.log( 'RESULT_FILTERING' );
console.log( result_filtering );

// Using .find()
// Similar to using .filter(), but instead of extracting the ids beforehand, we loop over the "selectedArray" with .find()
const result_find_city = mainCities.filter( main => {
  return !selectedCities.find( selected => selected.id === main.id );
});
console.log( 'RESULT_FIND_CITY' );
console.log( result_find_city );

const json_splice_final = JSON.stringify( result_splice_final );
const json_filtering = JSON.stringify( result_filtering );
const json_find_city = JSON.stringify( result_find_city );
console.log( 'All results are identical:' );json_find_city && 
console.log( json_splice_final === json_filtering && json_splice_final === json_find_city && json_filtering === json_find_city );

Answer 8

const mainCities = [
   {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 selectedCities = [
   {id: 6, city: 'ROME'},
   {id: 7, city: 'DUBLIN'},
   {id: 8, city: 'ATHENS'},
   {id: 9, city: 'ANKARA'},
   {id: 10, city: 'MOSCOW'},
];

// Using splice
// We iterate over the "selectedCities" and use .findIndex() to locate the index of each object.
const result_splice_final = [ ...mainCities ];
selectedCities.forEach( selectedCity => {
  const index_in_mainCities = result_splice_final.findIndex( main => main.id === selectedCity.id );
  result_splice_final.splice( index_in_mainCities, 1 );
});
console.log( 'RESULT_SPLICE_FINAL' );
console.log( result_splice_final );

// Using .filter();
// We extract all the selected ids and then .filter() the "mainCities" to eliminate
// all items with an id found inside "selected_ids"
const selectedIds = selectedCities.map( selected => selected.id );
const result_filtering = mainCities.filter( main => !selectedIds.includes( main.id ));
console.log( 'RESULT_FILTERING' );
console.log( result_filtering );

// Using .find()
// Similar to using .filter(), but instead of extracting the ids beforehand, we loop over the "selectedArray" with .find()
const result_find_city = mainCities.filter( main => {
  return !selectedCities.find( selected => selected.id === main.id );
});
console.log( 'RESULT_FIND_CITY' );
console.log( result_find_city );

const json_splice_final = JSON.stringify( result_splice_final );
const json_filtering = JSON.stringify( result_filtering );
const json_find_city = JSON.stringify( result_find_city );
console.log( 'All results are identical:' );json_find_city && 
console.log( json_splice_final === json_filtering && json_splice_final === json_find_city && json_filtering === json_find_city );

Answer 9

Answer №5

The quickest and most straightforward method is as follows:

const initialList = [
    { 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 selectedItems = [
    { id: 6, city: 'ROME' },
    { id: 7, city: 'DUBLIN' },
    { id: 8, city: 'ATHENS' },
    { id: 9, city: 'ANKARA' },
    { id: 10, city: 'MOSCOW' },
];

const selectedIds = selectedItems.map(({ id }) => id);
const remainingItems = initialList.filter(({ id }) => !selectedIds.includes(id));
console.log(remainingItems);

Answer 10

The quickest and most straightforward method is as follows:

const initialList = [
    { 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 selectedItems = [
    { id: 6, city: 'ROME' },
    { id: 7, city: 'DUBLIN' },
    { id: 8, city: 'ATHENS' },
    { id: 9, city: 'ANKARA' },
    { id: 10, city: 'MOSCOW' },
];

const selectedIds = selectedItems.map(({ id }) => id);
const remainingItems = initialList.filter(({ id }) => !selectedIds.includes(id));
console.log(remainingItems);

Answer 11

Answer №6

To find the index of a value in JavaScript, you can use the following code snippet:

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

Once you have the index, you can remove that item from the array like this:

fruits.splice(index, 1);

If you need more information, you can check out this resource:

Love2Dev Removing Array Items By Value Using Splice

Answer 12

To find the index of a value in JavaScript, you can use the following code snippet:

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

Once you have the index, you can remove that item from the array like this:

fruits.splice(index, 1);

If you need more information, you can check out this resource:

Love2Dev Removing Array Items By Value Using Splice

What is the best way to eliminate an object from an array using JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Ensure that the file exists before including it in the $routeProvider template for ng-include

I'm unable to resolve the issue regarding the message "Property or method is not defined on the instance but referenced during render."

What are Fabric.js tools for "Drop Zones"?

The responses for several HTTP POST requests are not being received as expected

Building XML using PHP with relatively extensive information stored in JavaScript

Ensure the backslashes are removed from the AWS Lambda string API response

Is there a way to retrieve a single value using AJAX instead of returning the entire HTML page?

The "body" object cannot be accessed in a post request made from an Express router

Encountering a popup_closed_by_user error while attempting to test Google OAuth within my web application

Newbie's Guide - Building React/React-Bootstrap JavaScript Components Post Linking CDNs in index.html

Implementing Routes in Express Using Typescript Classes

Discover the myriad of possibilities created by combining arrays

Using JavaScript, add a complex JSON record to a JSON variable by pushing it

Aggregate data by various categories and compute a total sum

Navigate audio tracks with JavaScript

In case the desired property is not detected in the object, opt for an alternative property

Caution: It is important for each child to be assigned a distinct key - How to pass an array in

How can I execute a basic query in jQuery or JavaScript based on a selected value that changes

Fetch data from Firestore when the page loads using the useEffect hook

How to modify the background color in Material Ui's datepicker?