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

Is it possible to trigger JavaScript after loading a page in jqTouch with AJAX?

What is the best way to target a class within a span using CSS?

Unexpected Results from WordPress Ajax Request

Unexpected error in boot.ts file in Angular 2

What could be causing my Apollo useLazyQuery to be triggered unexpectedly within a React hook?

Obtaining the result from within the .then() block

Troubleshooting: Next JS 13/14 - Server component failing to update data upon revisiting without requiring a refresh

Arrange the table by adding and editing before and after appending

Step-by-step guide on permanently assigning a value in Node.js

What is the best way to locate the closest points using their positions?

Selenium-webdriver is having trouble locating an element through the CSS selector

A sophisticated approach to implementing a search functionality within a complex JSON structure containing nested arrays using JavaScript

Ways to invoke external jQuery functions within Angular applications

What mechanism enables the scores on this sports ticker to refresh automatically without relying on ajax calls?

What is the best way to enable the delete function exclusively for users who are logged in?

Utilizing third-party modules/functions across multiple classes

Animating an image inside a bordered div

How can data be sent to an AJAX request using jQuery?

Are You Able to Develop a Floating Window That Stays Persistent in JavaScript?

What could be causing my jQuery switch not to function on the second page of a table in my Laravel project?