How to increment the key value by onclick if already the key value present in the array using TypeScript?

Question

Here I am having the onclick function which is get the Product_id, Product_name and Price from detailss array. I am storing this value using local storage array wishlist.

Now I am stuck to update the quantity in local storage array wishlist, I need to add the quantity if the productid already present in local storage.

addToCart(Product_id){
    
    var name=[{
        Product_id:this.detailss[0].Product_id,
        Product_name:this.detailss[0].Product_name,
        Price:this.detailss[0].Price,
        Quantity:"",
        
    }];

var a = JSON.parse(localStorage.getItem('wishlist')) || [];
a.push(name);
localStorage.setItem('wishlist', JSON.stringify(a));
console.log(Product_id);

}



    

Thanks in advance.

Answer 1

Function that only adds amount if item exists.

In this example amount is added by clicking on + button inside the cart:

addAmount(Product_id){
    let myArray = JSON.parse(localStorage.getItem('wishlist'));
        for(let i = 0; i < myArray.length; i++){
           if(Product_id == myArray[i].Product_id){
               myArray[i].Quantity = parseInt(myArray[i].Quantity) + 1;
               localStorage.setItem('wishlist', JSON.stringify(myArray));
           }
    }
 }

If you want to pass a number:

 addAmount(Product_id, Quantity){
        let myArray= JSON.parse(localStorage.getItem('wishlist'));
            for(let i = 0; i < myArray.length; i++){
               if(Product_id == myArray[i].Product_id){
                   myArray[i].Quantity = Quantity;
                   localStorage.setItem('wishlist', JSON.stringify(myArray));
               }
        }
     }

---

P.S. It's better to use Storage instead of localStorage for that kind of data.

When running in a native app context, Storage will prioritize using SQLite, as it's one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like localstorage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations.

import { Storage } from '@ionic/storage';
...
constructor(public _storage: Storage){}
...
this._storage.get('wishlist').then((res) => {
     for(let i = 0; i < res.length; i++){
         if(Product_id == res[i].Product_id){
            res[i].Quantity = parseInt(res[i].Quantity) + 1;
            //res[i].Quantity = Quantity;
            this._storage.set('wishlist', res).then(()=>
                console.log(res)
            );
         }
     }
})

Answer 2

1. Get the value from localStorage and parse them into an Object

var myList = JSON.parse(localStorage.getItem('wishlist')) || [];

2. Find the product with the Product_id

addQuantity(Product_id,passedQuantity) {

  let productIndex=myList.findIndex(eachProduct=> eachProduct.Product_id==Product_id);
  if(productIndex==-1)
  {
  //Product does not exist in the array
  }
  else
  {
  myList[productIndex].Quantity=passedQuantity;
  }
}

3. Stringify the array again and save it back in localStorage

localStorage.setItem('wishlist', JSON.stringify(myList));

Answer 3

That's not what localStorage is for... Try webStorage instead. https://www.w3schools.com/html/html5_webstorage.asp