1

Es mi primera pregunta por acá, así que espero no sea muy tonta.

Me encuentro apenas aprendiendo JavaScript y quiero que cuando la persona ingrese un numero indicando la cantidad de remeras o notebooks (let productos) que quiere comprar, haga la operación matemática que corresponde, pero no he logrado hacerlo, el resultado me muestra siempre un NaN. Creo que podría resolverse con filter y quizas con reduce, pero aun no termino de entender eso. Les paso el código a ver si me pueden ayudar. Muchas gracias a todos

//VARIABLES

class Cliente {
  constructor(nombre, genero) {
    this.nombre = nombre;
    this.genero = genero.toLowerCase();
  }
}
let productos = [{
    producto: "notebook",
    precio: 100000
  },
  {
    producto: "remera",
    precio: 2000
  }
]
const calcularIva = a => a * 0.21;

//EJECUCION DEL CODIGO
//Recopilar datos del cliente

let cliente1 = new Cliente(prompt("Cual es tu nombre?"), prompt("Sos mujer u hombre?"))
if (cliente1.genero === "mujer") {
  console.log("Bienvenida " + cliente1.nombre + " " + "te mostraremos prendas de mujer")
} else {
  console.log("Bienvenido " + cliente1.nombre + " " + "te mostraremos prendas de hombre")
}

//Hacer la cuenta del total a pagar

let comprar = prompt("¿Querés comprar remeras o notebooks?")
switch (comprar) {
  case "notebooks":
    let cantidadNotebooks = parseInt(prompt("¿Cúantas notebooks querés?"))
    let subtotalNotebooks = cantidadNotebooks * productos.filter((product) => product.producto === comprar).precio;
    let totalNotebooks = subtotalNotebooks + calcularIva(subtotalNotebooks);
    console.log(totalNotebooks);
    break;

  case "remeras":
    let cantidadRemeras = parseInt(prompt("¿Cúantas remeras querés?"))
    let subtotalRemeras = cantidadRemeras * productos.filter((product) => product.producto === comprar).precio;
    let totalRemeras = subtotalRemeras + calcularIva(subtotalRemeras);
    console.log(totalRemeras);
    break;

  default:
    alert("Elige solo entre remeras y notebooks")
    break;
}

2 respuestas 2

2

Tienes dos problemas:

  1. Estás usando el método para arrays llamado filter, lo cuál te devuelve un array, por lo tanto no puedes hacer la operación cantidadNotebooks * productos.filter((product) => product.producto === comprar).precio; y obtienes NaN. Te recomiendo usar find()
  2. Estás tratando de buscar el producto que tenga cumpla con product==="remeras", sin embargo en tu objeto estas propiedades están escritas en singular, así "remera".

//VARIABLES

class Cliente {
  constructor(nombre, genero) {
    this.nombre = nombre;
    this.genero = genero.toLowerCase();
  }
}
let productos = [{
    producto: "notebooks",
    precio: 100000
  },
  {
    producto: "remeras",
    precio: 2000
  }
]
const calcularIva = a => a * 0.21;

//EJECUCION DEL CODIGO
//Recopilar datos del cliente

let cliente1 = new Cliente(prompt("Cual es tu nombre?"), prompt("Sos mujer u hombre?"))
if (cliente1.genero === "mujer") {
  console.log("Bienvenida " + cliente1.nombre + " " + "te mostraremos prendas de mujer")
} else {
  console.log("Bienvenido " + cliente1.nombre + " " + "te mostraremos prendas de hombre")
}

//Hacer la cuenta del total a pagar
let comprar = prompt("¿Querés comprar remeras o notebooks?")
switch (comprar) {
  case "notebooks":
    let cantidadNotebooks = parseInt(prompt("¿Cúantas notebooks querés?"))
    let subtotalNotebooks = cantidadNotebooks * productos.filter((product) => product.producto === comprar).precio;
    let totalNotebooks = subtotalNotebooks + calcularIva(subtotalNotebooks);
    console.log(totalNotebooks);
    break;

  case "remeras":
    let cantidadRemeras = parseInt(prompt("¿Cúantas remeras querés?"))
    let subtotalRemeras = cantidadRemeras * productos.filter((product) => product.producto === comprar).precio;
    let totalRemeras = subtotalRemeras + calcularIva(subtotalRemeras);
    console.log(totalRemeras);
    break;

  default:
    alert("Elige solo entre remeras y notebooks")
    break;
}

Te recomiendo que pases el valor que pone el usuario a minúsculas antes de entrar al switch está manera si el usuario escribe cosas como "REMERAS" o "Remeras" no tienes problemas.

UPDATE

A sugerencia de JackNavaRow optimicé el código eliminando el switch.

//VARIABLES

class Cliente {
  constructor(nombre, genero) {
    this.nombre = nombre;
    this.genero = genero.toLowerCase();
  }
}
let productos = [{
    producto: "notebooks",
    precio: 100000
  },
  {
    producto: "remeras",
    precio: 2000
  }
]
const calcularIva = a => a * 0.21;

//EJECUCION DEL CODIGO
//Recopilar datos del cliente

let cliente1 = new Cliente(prompt("Cual es tu nombre?"), prompt("Sos mujer u hombre?"))
if (cliente1.genero === "mujer") {
  console.log("Bienvenida " + cliente1.nombre + " " + "te mostraremos prendas de mujer")
} else {
  console.log("Bienvenido " + cliente1.nombre + " " + "te mostraremos prendas de hombre")
}


let comprar = prompt("¿Querés comprar remeras o notebooks?").toLowerCase()
if (comprar === "remeras" || comprar === "notebooks") {
  let cantidad = parseInt(prompt(`¿Cúantas ${comprar} querés?`))
  let subtotal = cantidad * productos.find((product) => product.producto === comprar).precio;
  let total = subtotal + calcularIva(subtotal);
  console.log(total);

} else {
  alert("Elige solo entre remeras y notebooks")
}

4
  • @JackNavaRow Jaja, olvide un punto. Ahora funciona y acabo de comprar 400 notebooks.
    – FranAcuna
    el 13 abr. 2021 a las 18:42
  • Gran adición @JackNavaRow
    – FranAcuna
    el 13 abr. 2021 a las 18:55
  • 2
    impresionante la calidad de sus respuestas y más aún de sus explicaciones y trabajo en el código. Apenas tengo 2 meses aprendiendo JavaScript y sinceramente mis bases de programación eran muy bajas. Todo esto me re contra sirve para continuar mi aprendizaje. Millones de gracias, ya entiendo por qué dicen que Stackoverflow es el mejor amigo de los programadores el 13 abr. 2021 a las 19:46
  • ¡Me alegra mucho! Quédate por acá y aprenderás montones.
    – FranAcuna
    el 13 abr. 2021 a las 19:54
1

No veo que manejes errores en tu código, qué pasa si alguien escribe una letra en el prompt de cantidad? También sugeriría que esas operaciones en el switch fueran un poco mas "limpias", ve el resto de mi mensaje.

En fin, creo que el error que te interesa está en la manera en que accedes a el filtro de productos. El resultado del filter no es un objeto, sino un array con todos los objetos que cumplan con tu condición. En tu caso es un array con UN solo item. Por lo que la línea que hace el filtro debería ser:

let subtotalNotebooks = cantidadNotebooks * productos.filter((product) => product.producto === comprar)[0].precio;

Personalmente no me gusta porque en un futuro donde tenga miles de productos tienes que hacer un filtro uno por uno. Sin saber mucho contexto de la aplicación, recomendaría re-escribir con los siguientes puntos en mente:

  • Nota que tu array llamado "productos" tiene objetos y que cada nuno dentro tienen una llave llamada "producto", y esa llave la usas para identificar y acceder información. Esto es una señal que talves un array no es la mejor opción
  • Considera un objecto con llaves relevantes, por ejemplo:
let productos = {
  "notebook" : {
    precio: 100000
  },
  "remera" : {
    precio: 2000
  }
}

Esto permitiría cambiar el resto de la lógica de la siguiente manera (nota los otros detalles para reutilizar strings en tu lógica)

switch (comprar) {
  case "notebooks":
    let cantidadNotebooks = parseInt(prompt(`¿Cúantas ${comprar}s querés?`))
    let subtotalNotebooks = cantidadNotebooks * productos[comprar].precio;
    let totalNotebooks = subtotalNotebooks + calcularIva(subtotalNotebooks);
    break;
  case "remeras":
    let cantidadRemeras = parseInt(prompt(`¿Cúantas ${comprar}s querés?`))
    let subtotalNotebooks = cantidadNotebooks * productos[comprar].precio;
    let totalRemeras = subtotalRemeras + calcularIva(subtotalRemeras);
    console.log(totalRemeras);
    break;
  default:
    alert("Elige solo entre remeras y notebooks")
    break;
}

Al hacer esto puedes notar que el código es idéntico, lo cual te permite inclusive eliminar el switch. Atrapa errores del prompt antes de continuar. De preferencia con una función pero un simple if ya es mejor que el manejarlo en el default del switch:

let comprar = prompt("¿Querés comprar remeras o notebooks?")
if ( comprar !== "notebook" && comprar !== "remera") {
  alert("Elige solo entre remeras y notebooks")
} else {
  let cantidadNotebooks = parseInt(prompt(`¿Cúantas ${comprar}s querés?`))
  let subtotalNotebooks = cantidadNotebooks * productos[comprar].precio;
  let totalNotebooks = subtotalNotebooks + calcularIva(subtotalNotebooks);
}

Puede que existan otras razones para mantener productos en un array. Pero es el "tipo de datos" que normalmente existirían en alguna base de datos. Y por lo tanto, ya tendrían algún tipo de "id" con cual accederlos inmediatamente. En este caso sencillo, donde tú mismo defines los productos, es más fácil mantener un solo objeto con llaves fácilmente accesibles que te brindará muchas más facilidades al interactuar con el.

4
  • Muchas muchas gracias. Si, hay muchas cosas que no manejo y no tenga un código tan limpio, pero recién estoy aprendiendo desde hace 2 meses JavaScript y con muy pocas bases de programación. Me impresionó lo prolijo y limpio de tu código y aún más de tu explicación. Millones de gracias nuevamente el 13 abr. 2021 a las 19:48
  • Buena adición que hicistes del manejo de los productos.
    – FranAcuna
    el 13 abr. 2021 a las 19:53
  • @DanielMedinaTariba Si la respuesta te ha sido de ayuda deberías de marcarla como aceptada para que los demás usuarios del sitio puedan resolver sus dudas cuando busquen un problema similar al tuyo. Es la mejor manera de dar gracias.
    – FranAcuna
    el 13 abr. 2021 a las 20:09
  • 1
    @FranAcuna listo. Creo que ya pude, recién me cree el perfil hoy y aún estoy familiarizandome con la plataforma. Gracias nuevamente. el 14 abr. 2021 a las 1:47

Tu Respuesta

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

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