I Can't GroupBy arrays using computed in Vue.js - vue.js

Question

i want help on this. Thank you.
I have an object :
Funding : [
{person_id:'1';
Amount : '100'},
{person_id:'1';
Amount : '200'},
{person_id:'2';
Amount : '150'},
I would like to groupBy Funding by person_id and get the sum of Amount in each group.
I use this code but nt working ..
Groupe(array,key) {
const result = {}
array.forEach(funding => {
if (!result[funding[person_id]]){
result[funding[person_id]] = []
}
result[funding[person_id]].push(item)
})
return result
}

Answer 1

I created two different examples, one a function will return the summed amount of just one of the keys. In the second, it will return the summed amount of all the keys.
Here is a codepen for that https://codepen.io/aquilesb/pen/BvbqMd
const data = [
{
person_id:'1',
amount : '100'},
{
person_id:'2',
amount : '150'
},
{
person_id:'1',
amount : '150'
},
{
person_id:'2',
amount : '70'
}
];
const personID = '1';
// return by a key
const groupByKey = (list, key) => list.reduce((acc, item) => {
if (item.person_id === key) {
return parseInt(item.amount, 10) + acc;
}
return acc;
}, 0);
//return the sum of all keys
const groupAll = list => list.reduce((acc, item) => {
const accAmout = acc[item.person_id] || 0;
return Object.assign({}, acc, {[item.person_id]: accAmout + parseInt(item.amount, 10)});
}, {});
console.log("groupByKey", groupByKey(data, personID));
console.log("groupAll", groupAll(data));

Answer 2

You can use lodash's .groupBy function and .reduce functions to group by Person ID first, and then add the amounts together. Using a computed property in Vue makes this very easy, and you can access the object in your template like its a regular property.
Vue/HTML Template
<div id="app">
<ul v-for="(total,personId) in fundingByPerson">
<li>Persond ID: {{personId}}, Amount : ${{total.toFixed(2)}}</li>
</ul>
</div>
Javascript
// Include lodash via `npm install lodash`
import _ from 'lodash';
new Vue({
el: "#app",
data() {
return {
Funding: [
{person_id:'1', Amount : '130'},
{person_id:'1', Amount : '200'},
{person_id:'2', Amount : '350'},
{person_id:'45', Amount : '150'}
]
}
},
computed: {
// Group by Person, then add amounts together
fundingByPerson: function(){
let byPerson = _.groupBy(this.Funding, 'person_id');
let totals = {};
// Loop over each Group of Amounts, indexed by personId
_.forEach(byPerson, function(amounts, personId){
totals[personId] = _.reduce( byPerson[personId], function(sum, entry){
return sum + parseFloat( entry.Amount );
}, 0);
})
return totals;
} // fundingByPerson
})
Here's a working fiddle: http://jsfiddle.net/mdy59c7e/6/