Modelo de datos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 11

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Kevin Acevedo

hace 3 años

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.

Miguel Ángel Reyes Moreno

hace 2 años

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

Fernando García Guerrero

hace 2 años

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

David A. Casas Amézquita

hace 2 años

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

hace 2 años

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í

josué

hace 5 meses

este projecto se podria hacer con TDD.

Jose Ever Muñoz Muñoz

hace un año

Explico la función amount del computed ya que fue la más difícil de entender para mí ```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) }); } ```

Jose Ever Muñoz Muñoz

hace un año

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

hace un año

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

hace un año

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

hace 2 años

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

Si ya tienes una cuenta,

Curso Práctico de Vue.js

Modelo de datos