2

Estimados:

Tengo el siguiente archivo JSON con información:

var rawtData = [
    { date: "2015-01-03", "pv": 50, "ac": 100, "ev": 50 },
    { date: "2015-01-01", "pv": 100, "ac": 200, "ev": 200 },                                
    { date: "2015-01-02", "pv": 200, "ac": 100, "ev": 150 },                
    { date: "2015-01-03", "pv": 300, "ac": 400, "ev": 200 },                
    { date: "2015-01-03", "pv": 50, "ac": 50, "ev": 200 },
    { date: "2015-01-02", "pv": 200, "ac": 100, "ev": 50 },
    { date: "2015-01-01", "pv": 50, "ac": 100, "ev": 50 },
    { date: "2015-01-03", "pv": 10, "ac": 60, "ev": 50 },
    { date: "2015-01-01", "pv": 70, "ac": 50, "ev": 50 },
    { date: "2015-01-03", "pv": 400, "ac": 350, "ev": 300 }
];

y necesito acumular los valores de pv, ac y ev por día (en este ejemplo) como muestra el siguiente resultado:

resultData = [
    { "date": "2015-01-01", "pv": 220, "ac": 350, "ev": 300 },
    { "date": "2015-01-02", "pv": 400, "ac": 200, "ev": 200 },
    { "date": "2015-01-03", "pv": 810, "ac": 960, "ev": 800 },
];

Como soy novato en JavaScript y me lo pidieron para el trabajo, solo pude conseguir este fragmento de código que me permite agrupar datos pero no puedo hacer la sumatoria antes mencionada:

Array.prototype.groupBy = function (prop) {
    return this.reduce(function(groups, item) {
        var val = item[prop];
        groups[val] = groups[val] || [];
        groups[val].push(item);
        return groups;
     }, {});
}

Alguien podría ayudarme a comprender como modificar este código o si se tiene algún otro algoritmo estaré muy agradecido.

1
  • Junto con el Object.values es una maravilla, muchas gracias. el 12 nov. 2018 a las 14:52

2 respuestas 2

4

El group by de un Array, tal como lo tienes planteado, siempre tendrá la forma de un objeto cuyas llaves son los valores del campo por el que estás agrupando.

Modificando un poco tu función groupBy:

var rawtData = [
    { date: "2015-01-03", "pv": 50, "ac": 100, "ev": 50 },
    { date: "2015-01-01", "pv": 100, "ac": 200, "ev": 200 },
    { date: "2015-01-02", "pv": 200, "ac": 100, "ev": 150 },
    { date: "2015-01-03", "pv": 300, "ac": 400, "ev": 200 },
    { date: "2015-01-03", "pv": 50, "ac": 50, "ev": 200 },
    { date: "2015-01-02", "pv": 200, "ac": 100, "ev": 50 },
    { date: "2015-01-01", "pv": 50, "ac": 100, "ev": 50 },
    { date: "2015-01-03", "pv": 10, "ac": 60, "ev": 50 },
    { date: "2015-01-01", "pv": 70, "ac": 50, "ev": 50 },
    { date: "2015-01-03", "pv": 400, "ac": 350, "ev": 300 }
];

var groupBy = function (miarray, prop) {
    return miarray.reduce(function(groups, item) {
        var val = item[prop];
        groups[val] = groups[val] || {date: item.date, pv: 0, ac: 0,ev: 0};
        groups[val].pv += item.pv;
        groups[val].ac += item.ac;
        groups[val].ev += item.ev;
        return groups;
    }, {});
}

console.log(groupBy(rawtData,'date'));

Verás que la salida es

{
  "2015-01-03": {
    "date": "2015-01-03",
    "pv": 810,
    "ac": 960,
    "ev": 800
  },
  "2015-01-01": {
    "date": "2015-01-01",
    "pv": 220,
    "ac": 350,
    "ev": 300
  },
  "2015-01-02": {
    "date": "2015-01-02",
    "pv": 400,
    "ac": 200,
    "ev": 200
  }
}

Significa que puedes obtener los valores aplicando Object.values sobre la salida:

var resultData = Object.values(groupBy(rawtData,'date'));

Edit: En el snippet dejé una función que hace lo mismo sin meterse a modificar el prototipo de Array. Modificar los prototipos nativos es una mala práctica.

7
  • Joe, que rapida la respuesta. Aunque no soy el autor de la pregunta estaba atento a la pregunta y intentaba sacar una solución por mi cuenta pero mejor que esta imposible. Una pregunta. Podría añadir un metodo estatico a un objeto nativo como JSON a traves de JSON.metodo = function(){} o tambien es mala practica?ç
    – Lorthas
    el 22 feb. 2017 a las 21:48
  • 1
    Puedes añadir lo que quieras, pero a riesgo de pisar una propiedad existente, o modificar el comportamiento de la serialización de un objeto... pero en el caso de JSON que tiene puros métodos estáticos, otro método estático no tocará las inexistentes instancias de clase. Lo único malo es que los linters te van a marcar la definición de ese método con un warning
    – ffflabs
    el 22 feb. 2017 a las 21:53
  • Que buena respuesta que me diste..muy claro...ahora, quiero preguntarte por un detalle más... yo necesito que el array de salida sea del formato que había comentado antes, es decir: resultData = [ { "date": "2015-01-01", "pv": 220, "ac": 350, "ev": 300 }, { "date": "2015-01-02", "pv": 400, "ac": 200, "ev": 200 }, { "date": "2015-01-03", "pv": 810, "ac": 960, "ev": 800 }, ]; porque este es la entrada para alimentar a un gráfico de lineas de amCharts que va dibujando los valores acumulados y es el único formato de array de puede recibir.. Hay forma de tener este array de salida?
    – grandtjs
    el 22 feb. 2017 a las 22:23
  • 1
    Uh... pero si usando Object.values sale exactamente como necesitas.
    – ffflabs
    el 22 feb. 2017 a las 22:31
  • Como dice amenadiel, si usas Object.values a partir del resultado te debería devolver justo un array con objetos formateados tal cual. Es la última linea de código que puso en la respuesta el compañero.
    – Lorthas
    el 22 feb. 2017 a las 22:42
0

Basándome en la forma del resultData que muestras al principio, lo conseguí también utilizando reduce , inicializando el resultado en un arreglo vacío y agregando un nuevo elemento cuando no se encuentre una fecha en nuestro arreglo, y realizando la sumatoria si llega a encontrarlo:

var rawtData = [
    { date: '2015-01-01', pv: 100, ac: 200, ev: 200 },
    { date: '2015-01-02', pv: 200, ac: 100, ev: 150 },
    { date: '2015-01-03', pv: 50, ac: 100, ev: 50 },
    { date: '2015-01-03', pv: 300, ac: 400, ev: 200 },
    { date: '2015-01-03', pv: 50, ac: 50, ev: 200 },
    { date: '2015-01-02', pv: 200, ac: 100, ev: 50 },
    { date: '2015-01-01', pv: 50, ac: 100, ev: 50 },
    { date: '2015-01-03', pv: 10, ac: 60, ev: 50 },
    { date: '2015-01-01', pv: 70, ac: 50, ev: 50 },
    { date: '2015-01-03', pv: 400, ac: 350, ev: 300 },
]

const resultData = rawtData.reduce((arrGroup, current) => {
    let thatItem = arrGroup.find(item => item.date == current.date)
    if (thatItem == undefined) arrGroup = [...arrGroup, {...current}]
    else {
        thatItem.pv += current.pv
        thatItem.ac += current.ac
        thatItem.ev += current.ev
    }
    return arrGroup
}, [])

console.log(resultData)

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.