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: stackoverflow.com/q/19233283/4636715 — vahdet
– vahdet, Commented Sep 1, 2020 at 8:02
You can do that using array.reduce, then you can display the result with Vue in whatever preferred way. — briosheje
– briosheje, Commented Sep 1, 2020 at 8:03
what do you want to summarize? please add a valid (wanted) result. — Nina Scholz
– Nina Scholz, Commented Sep 1, 2020 at 8: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): jsfiddle.net/job642cg — briosheje
– briosheje, Commented Sep 1, 2020 at 8:12
@briosheje it is exactly what i wanted to get. thank you so much. — wiku
– wiku, Commented Sep 1, 2020 at 8:32

Nina Scholz · Accepted Answer · 2020-09-01 08:27:26Z

1

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

answered Sep 1, 2020 at 8:27

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikita Madeev · Accepted Answer · 2020-09-01 08:08:08Z

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

Ele · Accepted Answer · 2020-09-01 08:22:41Z

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)

Collectives™ on Stack Overflow

How to summary result data from group array using VueJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related