3

Buenas tardes compañeros, tengo un problema al obtener un array que almacene en el localstorage, el array es de tipo clase que lo uso como modelo para tipar unos productos que van en el carrito de compras. Lo que intento hacer es almacenar el listado de productos que esta en el carrito de compras en el localstorage para que se mantengan aun cargando la pagina. Este es el código no se si algún estimado me pudiera ayudar.

Este es el array donde estan almacenados los productos del carrito:

cartItems:CartItemModel[]= []

Estos son los metodos para establecer el carrito de compras en el local y storage y para capturarlos desde allí:

//Metodo para almacenar el carrito de compras en el localstorage:
  setCart(cart: CartItemModel[]): void {
    //Almacenamos el carrito en el localstorage:
    //El primer parámetro es el nombre de la variable donde va ir el carrito con los productos:
    //y el segundo parámetro es el valor como tal osea el carrito con los productos añadidos, este valor tiene que estar como String o en formato Json:
    localStorage.setItem('cart', JSON.stringify(cart));
  }

  //Metodo para obtener el carrito del localstorage:
  getCart():CartItemModel[]{
    return JSON.parse(localStorage.getItem('cart'));
  }

El error me aparece en el metodo get:

introducir la descripción de la imagen aquí

Esto es lo que dice el error: introducir la descripción de la imagen aquí

Este es la clase que uso como modelo para tipar los productos del carrito:

export class CartItemModel {
  productId: number;
  productName: string;
  productPrice: number;
  quantity:number

  constructor(product: ProductModel){
    this.productId= product.id
    this.productName= product.name;
    this.productPrice= product.price;
    this.quantity= 1;
  }
}

No entiendo que me quiere decir :(, que podría estar haciendo mal?

0

1 respuesta 1

4

El array cart puede o no puede estar en el localStorage. Es decir, localstorage.getItem('cart') puede retornar un string, o puede simplemente retornar null.

JSON.parse(..) recibe como argumento un string y le estás pasando algo que puede ser un string pero puede ser null. ¿Cómo hacer entonces? Algo habrá que hacer ya que JSON.parse() no puede manejar nulos:

Alternativa 1

Dile a Typescript que tu estás segurísimo de que nunca te va a llegar nulo. Typescript confiará en ti (incluso si estás equivocado) y no te señalará más el error. Para ello simplemente agrega el símbolo ! al final de localstorage.getItem('cart')!. Ahí le vas a decir a Typescript Yo te prometo que localstorage.getItem('cart') nunca va a ser nulo, y Typescript te creerá.

JSON.parse(localstorage.getItem('cart')!)

La desventaja, es que si alguna vez es nulo de verdad, tu aplicación explotará, porque no consideraste ese caso.

Alternativa 2

Lo mejor siempre es tomar precauciones y considerar que quiero que pase si cart no está en el localStorage. Una posible solución, que personalmente prefiero es decirle:

Mira Typescript, si cart no está en el localStorage, entonces vas a usar "[]" como entrada al JSON.parse.

Y así te limpias de no pasarle nunca null a la función, y no confías en la suerte de si está o no en el localStorage. Con tu código quedaría:

JSON.parse(localstorage.getItem('cart') || "[]")
1
  • Capooo, cualquiera de las dos servía pero me decante por la alternativa 2. A donde pa´ las papas mi estimado?, muchas gracias
    – Hugo
    Commented el 29 mar. 2022 a las 20:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.