Modelo de datos
Contenido del curso
Modelo de datos
Contenido del curso
Acordaros de utilizar fechas recientes en tiempo real al momento que veis este video. Ya que si poneis las mismas fechas que la clase, os devolvera un NaN y por ende, un error.
Crack,
gracias!!
El código quedó incompleto en el vídeo justo al final.
Si :(
Gente, si se quedaron esperando que pasara con el emit, no se preocupen, solo borrén esa línea que van por el emit que dentro de 2 clases se hará ese emit
la última línea de código, donde propagas con el emit, en el video se corta.. y en el repo no está, es por algo en especial?
Hola, si hubo que hacer un corte en la escena, peor el emit si debió quedar, probablemente esté en un commit posterior.
Es correcto, y no esta en el repositorio. Ni en commits posteriores.
también es posible calcular el valor de amount sin utilizar el map, haciendo uso de filter y reduce.
creo que la ventaja de esta solución es que no estamos recorriendo el arreglo en cada iteración del map, sino que estamos siempre tomado el ultimo elemento de la lista y usandolo para crear el nuevo elemento
amounts() { return this.movements .filter(({ time }) => { const today = new Date(); const oldDate = today.setDate(today.getDate() - 30); return time > oldDate; }) .reduce((acc, { amount }) => { return acc.length ? [...acc, acc[acc.length - 1] + amount] : [amount]; }, []); },
Toda la función computada amounts se pudo haber hecho en un solo return sin separar en variables, aprovechando el argumento array que contiene los métodos de arrays.
array .filter() .map((element, index, array) => { // donde el array de este map no es el array inicial sino el array resultante hasta el uso de este método })
.
La diferencia de días entre fecha la he hecho con el método .getTime() (documentación) que me devuelve en milisegundos el tiempo que hay desde el 1 de enero de 1970 hasta la fecha deseada. Luego calculo la diferencia de fechas y obtengo lo que deseo:
array..filter((movement) => { const daysDiff = (today.getTime() - movement.date.getTime()) / (1000 * 60 * 60 * 24); return daysDiff <= 30; })
.
Recordar también que para obtener el acumulado de los movimientos en donde cortamos el array con slice(init, fin) este debe ser cortado en el monto con índice i + 1 ya que el método nunca toma el fin para el recorte (documentación)
.
.map((_, i, lastDays) => { const lastMovements = lastDays.slice(0, i + 1); return lastMovements.reduce((accAmount, amount) => accAmount + amount, 0); });
. Les comparto mi reposiorio si quieren revisarlo, espero que les guste: . Reposirorio commit actual: Click aquí
Gracias bro!
este projecto se podria hacer con TDD.
si
¿Cómo podría solucionar el NaN que obtengo cuando hago comparaciones de 30 días atrás estando yo en Enero de 2023 y poniendo fechas de diciembre de 2022 menor a 30 días?, El algoritmo no lo soluciona
Ahí si tendrías que encontrar el algoritmo correcto, si gustas puedes compartir el proyecto en una plataforma como codesandbox o stackblitz, para poder apoyarte.
Hola . en el momento cuando hacemos la propiedad computada "amounts" dentro de componente Home.vue cuando esra linea de codigo:
.filter((m) => { const today = new Date(); const oldDate = today.setDate(today.getDate() - 30); // Aqui deveria ser > pero no funciona return m.time <= oldDate; }) .map((m) => m.amount);
A mi no me funciona si en la condicion la dejo como mayor. Poruqe pasa esto? dejo el pantallazo del error
Dice que está encontrando un valor tipo NaN (osea la operación no resulta en un número), para los valores de las coordenadas X e Y.
Entonces, sería cuestión de que revises que la operación si devuelva un número, averiguar porqué no, y poner tal vez un condicional o algo para que siempre devuelva un número.
Yo tenia tambien este error. Lo solucione utilizando otro formato de fecha de la propiedad time en el array movements.
time: new Date("9/5/2022")
Explico la función amount del computed ya que fue la más difícil de entender para mí
amounts(){ //last days es igual a todo el array de movements const lastDays = this.movements //filtramos cada movement .filter(m =>{ //la fecha de hoy const today = new Date(); //a la fecha de hoy le restamos 30 días const oldDate = today.setDate(today.getDate() - 30); //ahora comparamos esas fechas, la fecha del movement debe ser mayor a la oldDay que es la fecha de hace 30 días return m.time > oldDate; }) //ahora por cada fecha que este dentro de los 30 días, tomamos su amount .map(m => m.amount) //ahora retorno lastDays, lastDays es igual a todos los amount de los movements de no más de 30 días return lastDays.map((m, i) => { //toma el desde el primer elemento (0) hasta el elemento anterior al acutal (i) const lastMovements = lastDays.slice(0,i); //suma todos los movimientos menos el más reciente puesto que así lo decidimos el el slice() return lastMovements.reduce((suma, movement) => { return suma + movement; //el valor inicial es 0 },0) }); }
Explico la función amount del computed ya que fue la más difícil de entender para mí.amounts(){ //last days es igual a todo el array de movements const lastDays = this.movements //filtramos cada movement .filter(m =>{ //la fecha de hoy const today = new Date(); //a la fecha de hoy le restamos 30 días const oldDate = today.setDate(today.getDate() - 30); //ahora comparamos esas fechas, la fecha del movement debe ser mayor a la oldDay que es la fecha de hace 30 días return m.time > oldDate; }) //ahora por cada fecha que este dentro de los 30 días, tomamos su amount .map(m => m.amount) //ahora retorno lastDays, lastDays es igual a todos los amount de los movements de no más de 30 días return lastDays.map((m, i) => { //toma el desde el primer elemento (0) hasta el elemento anterior al acutal (i) const lastMovements = lastDays.slice(0,i); //suma todos los movimientos menos el más reciente puesto que así lo decidimos el el slice() return lastMovements.reduce((suma, movement) => { return suma + movement; //el valor inicial es 0 },0) }); }```js amounts(){ //last days es igual a todo el array de movements const lastDays = this.movements //filtramos cada movement .filter(m =>{ //la fecha de hoy const today = new Date(); //a la fecha de hoy le restamos 30 días const oldDate = today.setDate(today.getDate() - 30); //ahora comparamos esas fechas, la fecha del movement debe ser mayor a la oldDay que es la fecha de hace 30 días return m.time > oldDate; }) //ahora por cada fecha que este dentro de los 30 días, tomamos su amount .map(m => m.amount)
//ahora retorno lastDays, lastDays es igual a todos los amount de los movements de no más de 30 días return lastDays.map((m, i) => { //toma el desde el primer elemento (0) hasta el elemento anterior al acutal (i) const lastMovements = lastDays.slice(0,i); //suma todos los movimientos menos el más reciente puesto que así lo decidimos el el slice() return lastMovements.reduce((suma, movement) => { return suma + movement; //el valor inicial es 0 },0) }); }
Asi lo hice yo
computed: { amounts() { const lastDays = this.movements.reduce((acc, item, index) => { const today = new Date(); const oldDate = today.setDate(today.getDate() - 30); if (item.date >= oldDate) { if (index != 0) { acc.push(acc[index - 1] + item.amount) } else { acc.push(item.amount); } } return acc; }, []) //agregue un cero al inicio de la lista solo para comenzar con ese punto lastDays.unshift(0); return lastDays; } }
Tuve problemas al registrar decimales y como mis gastos llevan decimales tuve que encontrar la forma. la solucion es convertir las sumatorias a float
Datos de Movements
movements: [ { id: 0, title: "Movimiento 1", description: "Lorem ipsum dolor sit amet", amount: 100, time: new Date("02-01-2022"), }, { id: 1, title: "Movimiento 2", description: "Lorem ipsum dolor sit amet", amount: 200, time: new Date("02-01-2022"), }, { id: 2, title: "Movimiento 3", description: "Lorem ipsum dolor sit amet", amount: 500, time: new Date("02-01-2022"), }, { id: 3, title: "Movimiento 4", description: "Lorem ipsum dolor sit amet", amount: 200, time: new Date("02-01-2022"), }, { id: 4, title: "Movimiento 5", description: "Lorem ipsum dolor sit amet", amount: -400, time: new Date("02-01-2022"), }, { id: 5, title: "Movimiento 6", description: "Lorem ipsum dolor sit amet", amount: -600, time: new Date("02-01-2022"), }, { id: 6, title: "Movimiento 7", description: "Lorem ipsum dolor sit amet", amount: -300, time: new Date("02-01-2022"), }, { id: 7, title: "Movimiento 8", description: "Lorem ipsum dolor sit amet", amount: 100, time: new Date("02-01-2022"), }, { id: 8, title: "Movimiento 9", description: "Lorem ipsum dolor sit amet", amount: 300, time: new Date("01-01-2022"), }, { id: 9, title: "Movimiento 10", description: "Lorem ipsum dolor sit amet", amount: 500, time: new Date("01-01-2022"), }, ],
