"Encountered a problem while attempting to remove an element from

Question

"Encountered a problem while attempting to remove an element from

Currently, I am attempting to remove individual items from the cart that is stored in localStorage. However, I have only been successful in deleting the entire array using methods like removeItem() or clear(). My goal is to delete specific items based on their id. When trying to use the splice method, I encounter an error. As I am still learning, please let me know if more information is needed.

deleteProduct: (index) => {
            const existingEntries = JSON.parse(localStorage.getItem("cartData"));
            existingEntries.splice(index, 1);
            localStorage.setItem("cartData", JSON.stringify(existingEntries));
        }

let cartData = window.localStorage.getItem('cartData');

const cart = {
    state: {
        cartData: cartData ? JSON.parse(cartData) : {
            foods: [],
            totalPrice: [],
            Quantities: []
        },
    },

https://i.sstatic.net/j5yeW.png

https://i.sstatic.net/Yasb1.png

javascript vue.js local-storage vuex

Answer 1

Answer №1

Important details:

The variable cartData contains a string and is stored in the browser's localStorage as a string.
Once you parse it, cartData becomes an Object data type.
Within cartData, there is an array called foods which holds various food items.

Steps to follow in code:

Retrieve the cartData from the localStorage.
After parsing it, you will have a JSON Object with the key named 'food'.
Access the 'foods' key within cartData object.
Perform any necessary operations on the 'foods' array like splicing.

Answer 2

Important details:

The variable cartData contains a string and is stored in the browser's localStorage as a string.
Once you parse it, cartData becomes an Object data type.
Within cartData, there is an array called foods which holds various food items.

Steps to follow in code:

Retrieve the cartData from the localStorage.
After parsing it, you will have a JSON Object with the key named 'food'.
Access the 'foods' key within cartData object.
Perform any necessary operations on the 'foods' array like splicing.

Answer 3

Answer №2

Would you be willing to give this a shot?

let shoppingCart = JSON.parse(localStorage.getItem("shoppingCart"))
if(shoppingCart && shoppingCart.items) {
    const itemsInCart= shoppingCart.items;
    itemsInCart.splice(index, 1);
    localStorage.setItem("shoppingCart", JSON.stringify(itemsInCart))
}

Don't forget to update the totalPrice and Quantities before saving.

Answer 4

Would you be willing to give this a shot?

let shoppingCart = JSON.parse(localStorage.getItem("shoppingCart"))
if(shoppingCart && shoppingCart.items) {
    const itemsInCart= shoppingCart.items;
    itemsInCart.splice(index, 1);
    localStorage.setItem("shoppingCart", JSON.stringify(itemsInCart))
}

Don't forget to update the totalPrice and Quantities before saving.

Answer 5

Answer №3

It's a good practice to parse your array once it's retrieved

removeItem: (position) => {
        var cartData =  localStorage.getItem("cartItems")
        const items = JSON.parse(cartData);
        items.splice(position, 1);
        localStorage.setItem("cartData", JSON.stringify(items));
    }

Answer 6

It's a good practice to parse your array once it's retrieved

removeItem: (position) => {
        var cartData =  localStorage.getItem("cartItems")
        const items = JSON.parse(cartData);
        items.splice(position, 1);
        localStorage.setItem("cartData", JSON.stringify(items));
    }

"Encountered a problem while attempting to remove an element from

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript - Populating Dropdown Menu with Fresh Information

Unable to locate the value property of a null object

Populate a secondary dropdown menu using the selection from a primary dropdown menu and retrieve the corresponding "value" instead of displaying the value as a dropdown option

Authenticating Users with Laravel and Vue.js

Can one recover a Javascript file from a server?

Simply modifying a custom attribute source using jQuery does not result in it being refreshed

Implementing a file download feature in Python when clicking on a hyperlink

Understanding how to monitor a Boolean value that fluctuates in real-time within a three.js

JavaScript function to divide arrays into sequences

The attribute 'getTime' is not found in the data type 'number | Date'

The Ajax response is coming back with a null value, but upon inspecting the network response

Having difficulty processing information retrieved from an ajax request in jQuery

An issue occurred when attempting to modify bookings with the setState function

Type of object is unidentified in Vuejs with Typescript error code ts(2571)

I am finding the event naming conventions in Vue 3 to be quite perplex

Moving a Ball Back and Forth Using Three.js

Switching from Vanilla JS to Vue.js, dealing with querySelector problems

What are some ways to divide drop targets with React DnD?

Tips for Successfully Capturing Form Data with OnChange Event

Redirecting based on GeoIP location after the DOM has completely loaded