0

Estoy realizando un carrito de compras, la idea es que en cada iteracion del contenido del carrito en LocalStorage realice una peticion a una API e imprima los datos de cada producto en pantalla (hasta aqui todo funciona), despues inserta estos datos en un arreglo para calcular el total del carrito. El problema es cuando quiero calcular el total mediante Reduce(), me sale el resultado en cero porque por alguna razon que desconozco no puede acceder a las propiedades de cada objeto en el array. Aqui el codigo:

const productos = [];


const calcularTotal = function(){
    console.log(productos)
    
    const sumaTotales = productos.reduce((acumulador, actual)=> acumulador + actual.venta,0)
    console.log(sumaTotales)
 }
 
const pintarCarrito = async function(){
    cart.innerHTML = ""

    let carrito = JSON.parse(localStorage.carrito);
    // agregar total
    //hacer peticion a API para traer precios y nombre de productos
    Array.from(carrito).forEach(
        e=>{
              //console.log(e.id_articulo)
              fetch(`http://localhost:3000/productos/api/id/${e.id_articulo}`)
              .then(response => response.json())
              .then(data =>{
                  //console.log(data)
                  cart.innerHTML += `<li class="list-group-item d-flex justify-content-between lh-sm">
                  <div>
                      <h6 class="my-0">${data.nombre} </h6>
                  </div>
                  <span class="text-muted">$ ${data.venta}</span>
                  <input type="number" style="width:60px" min=0 max=100 value="${e.quantity}">
              </li>
              ` 

              productos.push({
                id_articulo: data.id_articulo,
                nombre: data.nombre,
                venta: Number(data.venta),
                cantidad: e.quantity
              })
              })
              .finally(calcularTotal())
              
          }
          )  
                  
}


Copie lo que me arroja en el console.log(productos) y lo puse en un nuevo arreglo,y de esta manera si me funciona el reduce(), por lo que creo que el problema está al hacer el push() en el arreglo vacio.

const productos2 =[
    {
      "id_articulo": 193,
      "nombre": "Bagel - Whole White Sesame",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 195,
      "nombre": "Syrup - Monin - Granny Smith",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 197,
      "nombre": "Pear - Prickly",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 199,
      "nombre": "\"Champagne - Brights Dry\"",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 215,
      "nombre": "Rosemary - Dry",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 198,
      "nombre": "\"Rum - Light Captain Morgan\"",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 196,
      "nombre": "Cup - Translucent 7 Oz Clear",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 212,
      "nombre": "Cocoa Feuilletine",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 294,
      "nombre": "agua",
      "venta": 12.5,
      "cantidad": 1
    },
    {
      "id_articulo": 295,
      "nombre": "agua de limon",
      "venta": 14.5,
      "cantidad": 1
    },
    {
      "id_articulo": 284,
      "nombre": "Wine - Chateau Bonnet",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 221,
      "nombre": "\"Wine - Red Concha Y Toro\"",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 227,
      "nombre": "Wine - Prem Select Charddonany",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 287,
      "nombre": "wine - Prosecco Valdobienne",
      "venta": 0,
      "cantidad": 1
    },
    {
      "id_articulo": 248,
      "nombre": "Wine - Sicilia Igt Nero Avola",
      "venta": 0,
      "cantidad": 1
    }
  ]

Anexo imagen del console.log de ambos arreglos, el de arriba es el generado en el forEach, el de abajo es hecho manualmente con la misma informacion (aqui si funciona reduce() )

introducir la descripción de la imagen aquí

1
  • Hay un problema con tu pregunta, la función donde está el reduce está bien, entonces como tu bien dices el problema puede estar en el foreach lo cual dificulta enormemente poder ayudarte, ya que no hay como probarlo, pero tú además aseguras que haces unos console.log dentro del foreach y esto no se ve en tu código, por otro lado esto: console.log(sumaTotales) no está presente en la imagen de salida. Por lo que te recomiendo que edites tu preguntas y detalles dónde están esos console.log para tener claro la depuración que haces.
    – Yussef
    el 4 ene. 2023 a las 10:50

1 respuesta 1

0

Primero, llamas a calcularTotal() dentro del forEach y en realidad solo necesitas llamar a esa función una vez, en mi caso el total lo devuelvo con la función pintarCarrito() misma y no uso el array products. Al parecer tu función calcularTotal() no está esperando a la finalización de las promesas para hacer el reduce por lo que siempre da 0. Lo que hago en mi caso dentro de pintarCarrito() es crear un array de promesas y las ejecuto con Promise.all() que a su vez devuelve un array de resultados, después uso un reduce() sobre ese array de resultados:

let productos = []

async function pintarCarrito(){
  let carrito = JSON.parse(localStorage.carrito);
  let resolvedPromises = [] // array de promesas
  for(const product of carrito){ // recorremos el carrito
    resolvedPromises = resolvedPromises.concat(new Promise((resolve, reject) => { // creamos el array de promesas
      fetch(`http://127.0.0.1:5500/productos/api/id/${product.id_articulo}.txt`)
        .then(response => response.json())
        .then(data => {
          /* esto esta comentado porque te falta el codigo HTML y me tira error
            cart.innerHTML += 
           `<li class="list-group-item d-flex justify-content-between lh-sm">
              <div>
                <h6 class="my-0">${product.nombre} </h6>
              </div>
                <span class="text-muted">$ ${product.venta}</span>
                <input type="number" style="width:60px" min=0 max=100 value="${e.product}">
            </li>` */
          productos.push({
            id_articulo: data.id_articulo,
            nombre: data.nombre,
            venta: data.venta,
            cantidad: data.cantidad
          })
          resolve(data) // si la promesa tiene exito devuelve toda la data
        })
        .catch(err => reject(err)) // de lo contrario devuelve un error
    })
  )}  
  resolvedPromises = await Promise.all(resolvedPromises); // obtenemos los resultados del array de promesas    
  return resolvedPromises.reduce((acc, curr) => acc += curr.venta, 0) // devolvemos la suma de las propiedades ventas
}

pintarCarrito()
  .then(res => console.log(res))
  .catch(err => console.log(err))

Promise.all() devuelve una promesa resuelta cuando todas las promesas del array han sido resueltas, o una promesa rechazada cuando al menos 1 de las promesas fue rechazada.

Te pido encarecidamente que agregues todo el código posible para facilitarnos la depuración porque si no es un infierno hacerlo sobre todo al usar fetch en ficheros, tuve que crear los archivos manualmente y llenar el localStorage yo mismo y eso puede desanimar a los que intenten replicar tu error, pruébalo y decime como va.

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.