Instead of adding a new object to the array, consider increasing the quantity of an existing object

Question

Instead of adding a new object to the array, consider increasing the quantity of an existing object

I am new to working with a shopping cart component and my code is structured like this:

let cartCount = document.getElementById("counter");
let isItemSelected = false;
let itemCount = 0;
let shoppingCart = [];
let selectedSize = "";
let displaySelectedSize = document.getElementById("selected");
let displayCart = document.getElementById("cart");

selectItem = () => {  
  isItemSelected = true;
  selectedSize = event.srcElement.id;
  displaySelectedSize.innerHTML = `${selectedSize}`;
}

addItem = () => {
  if (isItemSelected === true) {

    const shopItem = {
      name: "Classic Tee",
      price: 75,
      size: `${selectedSize}`,
      quantity: 0
    }

    itemCount += 1;
    cartCount.innerHTML = `( ${itemCount} )`;    
    shopItem.quantity++;
    shoppingCart.push(shopItem);
    console.log(shoppingCart);

    return itemSuccess();
  } else {
      return itemError();
  }
}

My goal is for the shopItem.quantity to increase if I have multiple of the selected size.

Currently, I am getting this output:

// Output
0: {name: "Classic Tee", price: 75, size: "small", quantity: 1}
1: {name: "Classic Tee", price: 75, size: "small", quantity: 1}

// Desired Output
0: {name: "Classic Tee", price: 75, size: "small", quantity: 2}

I understand why my output looks like that, as a new object is created each time my addItem function runs. However, I want to update my shopItem.quantity if there are duplicates...

How can I achieve that?

javascript arrays

Answer 1

Answer №1

To prevent conflicts, consider assigning an identity attribute to each item instead of relying on names. This can be done using the id property. Before adding an item, you can search for it in the collection. For instance, let's take a look at this sample item:

const cartItem = {id: 1, name: "Classic Tee"}

Prior to adding the item, you may check if it already exists in the shopping cart:

const existingItem = shoppingCart.find((item) => {
  return cartItem.id === item.id;
});

if(existingItem) {
   existingItem.quantity++;
} else {
  // Add the item to the cart
  shoppingCart.push(cartItem);
}

Answer 2

To prevent conflicts, consider assigning an identity attribute to each item instead of relying on names. This can be done using the id property. Before adding an item, you can search for it in the collection. For instance, let's take a look at this sample item:

const cartItem = {id: 1, name: "Classic Tee"}

Prior to adding the item, you may check if it already exists in the shopping cart:

const existingItem = shoppingCart.find((item) => {
  return cartItem.id === item.id;
});

if(existingItem) {
   existingItem.quantity++;
} else {
  // Add the item to the cart
  shoppingCart.push(cartItem);
}

Answer 3

Answer №2

When managing your shoppingCart array, it may be helpful to filter and determine whether to add a new item or increase the quantity of an existing one.

Here's a simplified example to illustrate the concept:

let shoppingCart = [];

addItem = (newItem) => {
    function itemFilter(item) {
        return item.name === newItem.name && item.price === newItem.price && item.size === newItem.size
    }
    let existingItems = shoppingCart.filter(itemFilter)

    if (existingItems.length > 0) {
        existingItems[0].quantity += newItem.quantity
    } else {
        shoppingCart.push(newItem)
    }

}

const shopItem = {
    name: "Classic Tee",
    price: 75,
    size: "small",
    quantity: 1
}

const shopItem2 = {
    name: "Classic Tee",
    price: 75,
    size: "big",
    quantity: 1
}

const shopItem3 = {
    name: "Classic Tee",
    price: 75,
    size: "small",
    quantity: 2
}

console.log('-----------')
console.log(shoppingCart)
addItem(shopItem)
console.log('-----------')
console.log(shoppingCart)
addItem(shopItem)
console.log('-----------')
console.log(shoppingCart)
addItem(shopItem2)
console.log('-----------')
console.log(shoppingCart)
addItem(shopItem)
console.log('-----------')
console.log(shoppingCart)

Output:

-----------
[]
-----------
[ { name: 'Classic Tee', price: 75, size: 'small', quantity: 1 } ]
-----------
[ { name: 'Classic Tee', price: 75, size: 'small', quantity: 2 } ]
-----------
[ { name: 'Classic Tee', price: 75, size: 'small', quantity: 2 },
  { name: 'Classic Tee', price: 75, size: 'big', quantity: 1 } ]
-----------
[ { name: 'Classic Tee', price: 75, size: 'small', quantity: 4 },
  { name: 'Classic Tee', price: 75, size: 'big', quantity: 1 } ]

Answer 4

When managing your shoppingCart array, it may be helpful to filter and determine whether to add a new item or increase the quantity of an existing one.

Here's a simplified example to illustrate the concept:

let shoppingCart = [];

addItem = (newItem) => {
    function itemFilter(item) {
        return item.name === newItem.name && item.price === newItem.price && item.size === newItem.size
    }
    let existingItems = shoppingCart.filter(itemFilter)

    if (existingItems.length > 0) {
        existingItems[0].quantity += newItem.quantity
    } else {
        shoppingCart.push(newItem)
    }

}

const shopItem = {
    name: "Classic Tee",
    price: 75,
    size: "small",
    quantity: 1
}

const shopItem2 = {
    name: "Classic Tee",
    price: 75,
    size: "big",
    quantity: 1
}

const shopItem3 = {
    name: "Classic Tee",
    price: 75,
    size: "small",
    quantity: 2
}

console.log('-----------')
console.log(shoppingCart)
addItem(shopItem)
console.log('-----------')
console.log(shoppingCart)
addItem(shopItem)
console.log('-----------')
console.log(shoppingCart)
addItem(shopItem2)
console.log('-----------')
console.log(shoppingCart)
addItem(shopItem)
console.log('-----------')
console.log(shoppingCart)

Output:

-----------
[]
-----------
[ { name: 'Classic Tee', price: 75, size: 'small', quantity: 1 } ]
-----------
[ { name: 'Classic Tee', price: 75, size: 'small', quantity: 2 } ]
-----------
[ { name: 'Classic Tee', price: 75, size: 'small', quantity: 2 },
  { name: 'Classic Tee', price: 75, size: 'big', quantity: 1 } ]
-----------
[ { name: 'Classic Tee', price: 75, size: 'small', quantity: 4 },
  { name: 'Classic Tee', price: 75, size: 'big', quantity: 1 } ]

Answer 5

Answer №3

To implement a similar functionality using the reduce method, follow this example:

    const sampleList = [
        { value: 8, quantity: 1, cost: 3 },
        { value: 8, quantity: 1, cost: 3 },
        { value: 8, quantity: 1, cost: 3 },
        { value: 8, quantity: 1, cost: 3 },
        { value: 8, quantity: 1, cost: 3 },
        { value: 10, quantity: 1, cost: 12 },
    ];
    const reducerFunction = (obj, item) => {
        obj[item.value]
            ? (obj[item.value].quantity += 1)
            : (obj[item.value] = { ...item });
        return obj;
    };

    const hashmapArray = sampleList.reduce(reducerFunction, {});
    const mergedItems = Object.values(hashmapArray);
    console.log(mergedItems);

Answer 6

To implement a similar functionality using the reduce method, follow this example:

    const sampleList = [
        { value: 8, quantity: 1, cost: 3 },
        { value: 8, quantity: 1, cost: 3 },
        { value: 8, quantity: 1, cost: 3 },
        { value: 8, quantity: 1, cost: 3 },
        { value: 8, quantity: 1, cost: 3 },
        { value: 10, quantity: 1, cost: 12 },
    ];
    const reducerFunction = (obj, item) => {
        obj[item.value]
            ? (obj[item.value].quantity += 1)
            : (obj[item.value] = { ...item });
        return obj;
    };

    const hashmapArray = sampleList.reduce(reducerFunction, {});
    const mergedItems = Object.values(hashmapArray);
    console.log(mergedItems);

Instead of adding a new object to the array, consider increasing the quantity of an existing object

Answer №1

Answer №2

Answer №3

Similar questions

When using `v-if` in Vue, it is unable to directly access boolean values within arrays

Tips for extracting unique values from two arrays and returning them in a new array using JavaScript

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

The JavaScript code is failing to retrieve any data from the API

Passing a one-dimensional array into std::thread is not possible

disabling past dates in Bootstrap calendar

Sharing Global Variables in Node.js: What's the Best Way to Pass Them into Required Files?

Get the JSON file from Firebase storage

Tips for Dynamically Binding Data in Angular ChartsWant to learn how to dynamically bind

Exploring data-toggle elements using jQuery

Creating a variable in Python that can serve as an index for slicing another variable

How does the 'snack bar message' get automatically assigned without being explicitly defined in the 'data' function?

Struggling to connect with PouchDB within my HTML-based Web application

Switching the navigation menu using jQuery

Display Vue component using a string input

Unable to locate the image file path in React.js

Use a conditional statement for each element within the array

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

Grunt is throwing an error message of "Cannot GET/", and unfortunately ModRewrite is not functioning properly

Node/ejs not recognizing Javascript files