How to summary result data from group array using VueJS

Question

I Have array data like this :

transaction: [{
  "name": "Alpha",
  "date": "2020-08-01",
  "amount": "1000",
}, {
  "name": "Alpha",
  "date": "2020-08-01",
  "amount": "2000",
}, {
  "name": "Alpha",
  "date": "2020-09-01",
  "amount": "1000",
}, {
  "name": "Beta",
  "date": "2020-08-01",
  "amount": "1000",
}, {
  "name": "Beta",
  "date": "2020-09-01",
  "amount": "1000",
}]

My expected result should be like this:

my expected result : 

{"Alpha" : {
  "2020-08-01" : 
    {
      "sum" : "3000"
    },
  "2020-09-01" : 
    {
      "sum" : "1000"
    }
  },
"Beta" : {
  "2020-08-01" : 
    {
      "sum" : "3000"
    },
  "2020-09-01" : 
    {
      "sum" : "1000"
    }
  }
}

The best i can do only group the data using lodash function and i got result like this, and i don't know how to summarize the amount.

{"Alpha" : {
    "date" : "2020-08-01" ,
    "amount" : "2000",
  },{
    "date" : "2020-08-01" ,
    "amount" : "1000",
  },{
    "date" : "2020-09-01" ,
    "amount" : "1000",
  }, 
"Beta" : {
    "date" : "2020-08-01" ,
    "amount" : "1000",
  },{
    "date" : "2020-09-01" ,
    "amount" : "1000",
  }
}

I am new at javascript programming. Can someone help me to get my expected result?

It has more to do with JavaScript than Vue. Btw, please share your expected result as a JSON object like you did for the input. It may well be a variant of this: https://stackoverflow.com/q/19233283/4636715 — vahdet, Sep 01 '20 at 08:02
You can do that using `array.reduce`, then you can display the result with Vue in whatever preferred way. — briosheje, Sep 01 '20 at 08:03
what do you want to summarize? please add a valid (wanted) result. — Nina Scholz, Sep 01 '20 at 08:07
@NinaScholz from the output above, the best guess is that he sort of wants to pivot data, where rows are Name and Date, and columns are the sum of the amounts, like this (imho): https://jsfiddle.net/job642cg/ — briosheje, Sep 01 '20 at 08:12
@briosheje it is exactly what i wanted to get. thank you so much. — wiku, Sep 01 '20 at 08:32
@wiku please check any of the answers below and accept one of them, I'm glad my fiddle helped, though :) — briosheje, Sep 01 '20 at 08:36

score 1 · Accepted Answer · answered Sep 01 '20 at 08:27

You could take a dynamic approach by storing the wanted keys in an array and use an algorithm for multiple nested data sets.

const
    data = [{ name: "Alpha", date: "2020-08-01", amount: "1000" }, { name: "Alpha", date: "2020-08-01", amount: "2000" }, { name: "Alpha", date: "2020-09-01", amount: "1000" }, { name: "Beta", date: "2020-08-01", amount: "1000" }, { name: "Beta", date: "2020-09-01", amount: "1000" }],
    keys = ['name', 'date', 'amount'],
    result = data.reduce((r, o) => {
        const
            [last, value] = keys.slice(-2).map(k => o[k]),
            group = keys.slice(0, -2).reduce((t, k) => t[o[k]] = t[o[k]] || {}, r);
        group[last] = (group[last] || 0) + +value;
        return r;
    }, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 0 · Answer 2 · answered Sep 01 '20 at 08:08

You can use JS reduce and then display the object in your preferred way on Vue

const transaction = [
    { name: 'Alpha', date: '2020-08-01', amount: '1000' },
    { name: 'Alpha', date: '2020-08-01', amount: '2000' },
    { name: 'Alpha', date: '2020-09-01', amount: '1000' },
    { name: 'Beta', date: '2020-08-01', amount: '1000' },
    { name: 'Beta', date: '2020-09-01', amount: '1000' },
];

const result = transaction.reduce((acc, { name, date, amount }) => {
    if (acc[name]) {
        if (acc[name][date]) {
            acc[name][date] += +amount;
        } else {
            acc[name][date] = +amount;
        }
    } else {
        acc[name] = {
            [date]: +amount,
        };
    }

    return acc;
}, {});

console.log(result);

score 0 · Answer 3 · answered Sep 01 '20 at 08:22

Assuming you want to build a key-value object, you can use the function Array.prototype.reduce as follow:

const transaction = [{  "name": "Alpha",  "date": "2020-08-01",  "amount": "1000",}, {  "name": "Alpha",  "date": "2020-08-01",  "amount": "2000",}, {  "name": "Alpha",  "date": "2020-09-01",  "amount": "1000",}, {  "name": "Beta",  "date": "2020-08-01",  "amount": "1000",}, {  "name": "Beta",  "date": "2020-09-01",  "amount": "1000"}],
      result = transaction.reduce((r, {name, date, amount}) => {
        let current = (r[name] || (r[name] = {[date]: 0}));
        if (current[date]) current[date] += +amount;
        else Object.assign(r[name], {[date]: +amount});

        return r;
      }, {});

console.log(result)

How to summary result data from group array using VueJS

3 Answers3