0

estoy tratando de replicar un ejercicio de un carrito de compras, para ver si puedo implementarlo más adelante, pero tengo un pequeño problema, cuando quiero cargar los elementos que se han guardado en una tabla de carrito, angular me dice que no pudo acceder a la propiedad _id porque esta indefinida, tengo un servicio que hace este proceso y me carga los datos en un componente pero igualmente, aunque los datos guarden correctamente, estos luego no pueden ser renderizados por el error.

getCartItems(): Observable<CartItem[]> {
    return this.http.get<CartItem[]>(this.URL + '/cart').pipe(
      map((result: any[]) => {
        let cartItems: CartItem[] = [];

        for (let item of result) {
          let productExits = false;

          for (let i in cartItems) {
            if (cartItems[i].productId === item.product._id) {
              Swal.fire({
                title: 'Ya tienes este producto en tu carrito',
                showClass: {
                  popup: 'animate__headShake',
                },
                hideClass: {
                  popup: 'animate__backOutUp',
                },
              });
              productExits = true;
              break;
            }
          }

          if (!productExits) {
            cartItems.push(new CartItem(item._id, item.produtc));
          }
        }
        return cartItems;
      })
    );
  }

introducir la descripción de la imagen aquí

Este es el modelo,

import { Product } from './products';

export class CartItem {
  _id: string;
  productId: string;
  name: string;
  price: number;
  constructor(_id: '', product: Product) {
    this._id = _id;
    this.productId = product._id;
    this.name = product.name;
    this.price = product.price;
  }
}

UPDATE

Respecto a los comentarios, sobre mi API, solo hago una consulta a los carritos de compra que se almacenan y este es el codigo:

cartController.getAllCarts = async (req, res, next) => {
  try {
    const carts = await model_cart.find();
    return res.json(carts);
  } catch (err) {
    next(err);
  }
};

Me imagino que en esta consulta debo enviar tambien los datos del producto.

8
  • Hola, lo que esta undefined no es el _id, si no todo el objeto que deberia contenerlo. Cual es la linea shopcart.service.ts:40 ? Ahi esta el inicio de la solucion.
    – Legna
    Commented el 9 jun. 2020 a las 18:49
  • Me imagino que el problema viene de item.product._id. Haz un console.log de item para ver por si la sintaxis que estas usando es correcta.
    – Legna
    Commented el 9 jun. 2020 a las 18:51
  • Hola, la linea 40 de shopcart.service es cartItems.push(new CartItem(item._id, item.product)); . Respecto al console.log, me trae el objeto item, que seria el producto Commented el 9 jun. 2020 a las 19:06
  • El console.log lo puse antes de entrar al condicional de !productExits Y me muestra esto, prnt.sc/swrp3l Commented el 9 jun. 2020 a las 19:11
  • item no tiene la propiedad product. Ese es el problema. Puedes comprobarlo por favor con console.log('item.product') para corroborar que verdaderamente esta nulo?
    – Legna
    Commented el 9 jun. 2020 a las 19:18

2 respuestas 2

1

Debes corregir la siguiente linea para que te funcione:

 if (!productExits) {                             //Aqui
            cartItems.push(new CartItem(item._id, item));
          }

Y esta otra linea en tu model:

this.productId = product.productId;

Lo que estas recibiendo en result: any [] es en realidad una lista de productos. item.product no existe. Asumiendo que item es el product esto resolvera el problema.

1
  • La primera linea donde hice el cambio, digamos que solo me funciono para cuando el carrito esta completamente vacío en mongo, al hacer el primer save, me guarda bien, pero si quiero añadir otro producto, vuelve y marca error y si refresco la página, el producto que se había añadido, ya no se renderiza en mi componente y sigue saliendo el mismo error de _id undefined, la linea que me dices que agregue al model, no vendría siendo lo mismo si lo dejo igual?, porque en el model de products, ese campo si se llama _id Commented el 9 jun. 2020 a las 20:19
1

al final logré dar con la solución, gracias a la respuesta anterior, cambie la linea

if (!productExits) {
            cartItems.push(new CartItem(item._id, item)); //Aqui
          }

Y este if, if (cartItems[i]._id === item.productId), lo tenía como item.product._id, al hacer este cambio, ya quedo funcionando como queria el componente.

2
  • Excelente. Que bueno que encontraste el problema.
    – Legna
    Commented el 9 jun. 2020 a las 20:40
  • Muchas gracias por tu ayuda. Commented el 9 jun. 2020 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.