Is there a way to create a function in JavaScript that eliminates duplicate Objects within an Array of Objects?

Question

Is there a way to create a function in JavaScript that eliminates duplicate Objects within an Array of Objects?

Currently, I'm working on a function to store details of a couch in a JS object with 3 properties locally. The properties include:

An ID (obtained from the product URL using a function)
A color (retrieved through an event listener)
A quantity (also obtained through an event listener)

I already have a function that allows me to store objects locally using an array:

function addedToCart(productObject) {
  let listOfProducts = getProducts();
  listOfProducts.push(productObject);
  registerProducts(listOfProducts);
}


function getProducts() {
  let listOfProducts = localStorage.getItem("listOfProducts");
  if (listOfProducts == null) {
    return [];
  } else {
    return JSON.parse(listOfProducts);
  }
}

function registerProducts(listOfProducts) {
  localStorage.setItem("listOfProducts", JSON.stringify(listOfProducts));
}

In addition to this, I have implemented 3 event listeners:

To detect when the user selects a color option and capture its value
To track changes in the input field for quantity and retrieve its value
To respond to the user clicking on the "Add to cart" button

Below is my JavaScript code:

... (JavaScript code omitted for brevity) ...

The issue I am facing is that redundant object instances are added to the array when the user clicks the "Add to cart" button multiple times or changes the quantity before adding to the cart.

[{id: "107fb5b75607497b96722bda5b504926", color: "White", quantity: "1"},…]
0: {id: "107fb5b75607497b96722bda5b504926", color: "White", quantity: "1"}
1: {id: "107fb5b75607497b96722bda5b504926", color: "Blue", quantity: "1"}
2: {id: "107fb5b75607497b96722bda5b504926", color: "Blue", quantity: "1"}
3: {id: "107fb5b75607497b96722bda5b504926", color: "Blue", quantity: "2"}

My aim now is to devise a function to compare and eliminate redundant objects in the array based on the ID, color, and quantity properties. This function should follow specific conditions outlined above.

If you need further clarification or have any suggestions regarding my code, please feel free to share. Your assistance is greatly appreciated.

javascript arrays class object local-storage

Answer 1

Answer №1

To handle adding products to the cart efficiently, you can use the following JavaScript function:

function addToCart(product) {
  let productList = getProducts();
  productList = productList.filter(({productId, color}) => {
    return !(productId == product.productId && color == product.color);
  });
  productList.push(product);
  updateCart(productList);
}

This function removes any existing entry with the same productId and color as the new product being added, ensuring that only unique items are in the cart. Quantity is not considered when determining uniqueness, as the focus is on the product characteristics.

Answer 2

To handle adding products to the cart efficiently, you can use the following JavaScript function:

function addToCart(product) {
  let productList = getProducts();
  productList = productList.filter(({productId, color}) => {
    return !(productId == product.productId && color == product.color);
  });
  productList.push(product);
  updateCart(productList);
}

This function removes any existing entry with the same productId and color as the new product being added, ensuring that only unique items are in the cart. Quantity is not considered when determining uniqueness, as the focus is on the product characteristics.

Answer 3

Answer №2

After much searching, I finally came across a resolution:


  const checkProducts = (productToCheck, productsArray) => {
    let foundProduct = productsArray.find((product) => { 
    const {id, color} = productToCheck;

   product.id === id && product.color === color
    }); 
  
    if(foundProduct){
      foundProduct.quantity = Number(productToCheck.quantity);
    }else{
      productsArray.push(productToCheck);
    }
  }

Answer 4

After much searching, I finally came across a resolution:


  const checkProducts = (productToCheck, productsArray) => {
    let foundProduct = productsArray.find((product) => { 
    const {id, color} = productToCheck;

   product.id === id && product.color === color
    }); 
  
    if(foundProduct){
      foundProduct.quantity = Number(productToCheck.quantity);
    }else{
      productsArray.push(productToCheck);
    }
  }

Answer 5

Answer №3

Here is a solution for removing redundant objects from an array by passing it to a function.

The logic involves iterating through the array in reverse order, checking for duplicate objects based on id and color.

If a duplicate object with the same id, color, and quantity is found, or an object with the same id and color but different quantity, it is considered redundant and removed.

After the loop, any undefined indexes are cleaned up to tidy the array.

An efficient way to implement this code is to check against the last added object when adding new objects.

const arr = [{id : 1, color : "black", quantity: 1}, 
           {id : 1, color : "black", quantity: 1},
           {id : 1, color : "black", quantity: 2},
           {id : 2, color : "black", quantity: 1}];
           
function getRidOfRedundant(arr) {
    let newArr = [...arr] //creating shallow copy of arr
    let compare = newArr.map(x => x.id + x.color);
    for (let i = 0; i < compare.length; i++) {
        if(compare.includes(compare[i], i + 1)) {
            delete (newArr[i])
        }

    }
    return newArr.filter(x => x !== undefined)
}

console.log(getRidOfRedundant(arr))

Another approach is to handle redundant objects during creation. You can have a constructor function that replaces duplicates in the array based on id and color.

You could also extract the logic into a separate function that finds the index of the redundant object and overwrites it with the new object.

class Product {

   static memory = [];
   static objects = []

   constructor(id, color, quantity) {
       this.id = id;
       this.color = color;
       this.quantity = quantity;

       if (Product.memory.includes(id + color)) {
           Product.objects[Product.memory.indexOf(id + color)] = this;
       } else {
           Product.memory.push(id + color);
           Product.objects.push(this);
       }
   }
}

new Product(id, color, quantity)

Answer 6

Here is a solution for removing redundant objects from an array by passing it to a function.

The logic involves iterating through the array in reverse order, checking for duplicate objects based on id and color.

If a duplicate object with the same id, color, and quantity is found, or an object with the same id and color but different quantity, it is considered redundant and removed.

After the loop, any undefined indexes are cleaned up to tidy the array.

An efficient way to implement this code is to check against the last added object when adding new objects.

const arr = [{id : 1, color : "black", quantity: 1}, 
           {id : 1, color : "black", quantity: 1},
           {id : 1, color : "black", quantity: 2},
           {id : 2, color : "black", quantity: 1}];
           
function getRidOfRedundant(arr) {
    let newArr = [...arr] //creating shallow copy of arr
    let compare = newArr.map(x => x.id + x.color);
    for (let i = 0; i < compare.length; i++) {
        if(compare.includes(compare[i], i + 1)) {
            delete (newArr[i])
        }

    }
    return newArr.filter(x => x !== undefined)
}

console.log(getRidOfRedundant(arr))

Another approach is to handle redundant objects during creation. You can have a constructor function that replaces duplicates in the array based on id and color.

You could also extract the logic into a separate function that finds the index of the redundant object and overwrites it with the new object.

class Product {

   static memory = [];
   static objects = []

   constructor(id, color, quantity) {
       this.id = id;
       this.color = color;
       this.quantity = quantity;

       if (Product.memory.includes(id + color)) {
           Product.objects[Product.memory.indexOf(id + color)] = this;
       } else {
           Product.memory.push(id + color);
           Product.objects.push(this);
       }
   }
}

new Product(id, color, quantity)

Is there a way to create a function in JavaScript that eliminates duplicate Objects within an Array of Objects?

Answer №1

Answer №2

Answer №3

Similar questions

Navigating with Vue Router in a Nuxt JS vuex Store

Even though the onSubmit attribute is set to false in the HTML form, it still submits

How can you attach a d3 graphic to a table that was created automatically?

storing a value in the browser's local storage

In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

Encountering a problem with Nginx and WordPress where the admin-ajax.php is causing an issue when returning an AJAX result, leading to an error of Un

Can CSS be used to automatically focus on a div element?

Leveraging various routes to access data with a shared VueJS 3 component

Utilizing jQuery AJAX to efficiently handle branching based on the result received

Organizing classes under namespaces in Node.js

Tips on locating information within a pre-existing GET array with parameters provided

Importing D3 data from CSV files using the "%" symbol

What strategies can I use to streamline this array update function code?

Is your JQuery Gallery experiencing issues with the next button function?

Disabling the current date on date pickers in material ui: A step-by-step guide

Styling GeoJSON data in the React Leaflet mapping library can greatly enhance the

Exploring the ins and outs of HTML event handlers with JavaScript

Can Backbone be used to retrieve a local JSON file?

What is the best way to incorporate tooltips in SVG?

I am not getting any reply in Postman - I have sent a patch request but there is no response showing up in the Postman console