Modelo de datos

Clase 16 de 21 • Curso Práctico de Vue.js

Kevin Acevedo

student•

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.

Kenneth Leonel Cruz Ordoñez

student•

Crack,

Sergio Edison Leguizamón Sarmiento

student•

gracias!!

Miguel Angel Reyes Moreno

student•

El código quedó incompleto en el vídeo justo al final.

Josue Cerron Tuesta

student•

Si :(

Fernando García Guerrero

student•

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

Matías Daniel Cravero

student•

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?

Diana Martinez

student•

Hola, si hubo que hacer un corte en la escena, peor el emit si debió quedar, probablemente esté en un commit posterior.

Francisco Javier Cervantes Candelario

student•

Es correcto, y no esta en el repositorio. Ni en commits posteriores.

David A. Casas Amézquita

student•

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];
    }, []);
},

Carlos Rodríguez

student•

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í

Josue Cerron Tuesta

student•

Gracias bro!

Rafael Soriano Ramírez

student•

¿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

Diana Martinez

student•

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.

Eden Gomez Gress

student•

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

Diana Martinez

student•

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.

M L

student•

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")

josué valencia

student•

este projecto se podria hacer con TDD.

Jose Ever Muñoz Muñoz

student•

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)
            });
        }

Jose Ever Muñoz Muñoz

student•

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) }); }

SANTIAGO OCHOA

student•

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;
        }
    }

Josue Donaldo Ramirez Marquez

student•

Tuve problemas al registrar decimales y como mis gastos llevan decimales tuve que encontrar la forma. la solucion es convertir las sumatorias a float

Jeanpierre Echevarria

student•

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"),
        },
      ],