CODEWITHSUNDEEP
angular
psj01
psj01

Reputation: 3245

Getting a local storage item not working properly in my angular app

I have an angular project where I have two components. a navbar component and a product component. they both call a service to get a cart. The service stores a cartId variable in the local storage which is used to access the cart.

There seems to be a problem with it being able to read the item from localstorage the second time the getOrCreateCartId function is called in the second component.

The service is as below:

import { ShoppingCart } from './models/shopping-cart';
import { Product } from './models/product';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
import { Injectable } from '@angular/core';

import 'rxjs/add/operator/take';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ShoppingCartService {

  constructor(private db:AngularFireDatabase) { }

  private create(){
    return this.db.list('/shopping-carts').push({
      dateCreated:new Date().getTime()
    })
  }

  async getCart() : Promise<Observable<ShoppingCart>> {
    let cartId = await this.getOrCreateCartId();
    return this.db.object('/shopping-carts/'+cartId)
    .map(x=>new ShoppingCart(x.items));
  }

  private async getOrCreateCartId(): Promise<string> {
    let cartId = localStorage.getItem('cartId');
    if(cartId) return cartId;

    let result = await this.create();
    localStorage.setItem('cartId',result.key);
    return result.key;

  }

  private getItem(cartId:string, productId:string){
    return this.db.object('/shopping-carts/'+cartId+'/items/'+productId);
  }

  addToCart(product:Product){
    this.updateItemQuantity(product,1);
  }

  removeFromCart(product:Product){
    this.updateItemQuantity(product,-1);
  }    

  private async updateItemQuantity(product: Product, change: number) {
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.$key);
    item$.take(1).subscribe(item => {
      let quantity = (item.quantity || 0) + change;
      if (quantity === 0) item$.remove();
      else item$.update({ 
        title: product.title,
        imageUrl: product.imageUrl,
        price: product.price,
        quantity: quantity
      });
    });
  }

  async clearCart(){
    let cartId = await this.getOrCreateCartId();
    this.db.object('/shopping-carts/'+cartId+'/items').remove();
  }

}

The problem I am having is that the first time navbar sets the cart object (this is assuming initial run, browswer doesn't already have a cartId in localstorage) then when the product component calls getCart(), it doesn't seem to be able to read the let cartId = localStorage.getItem('cartId'); instead, its also creating another cart.

Upvotes: 0

Views: 2351

Answers (2)

Stefan
Stefan

Reputation: 1511

You get it with await so app goes ahead and then when it does promise, a card is set but probably in your case, it's too late and that's why it creates a new card.

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

localStorage.getItem('cartId') returns a String, since you have told you are storing an object, you need to parse it to object and access the field of the object as follows,

 let cartId = JSON.parse(localStorage.getItem('cartId')).cardId;

Upvotes: 0

Related Questions