VueJs / Laravel. Sum of Multiple arrays in different objects

Question

i use this code to display all persons i have.

<div class="col-md-3" v-for="person in persons">
</div>

//Each Person is an Object. in Each Object there are multiple objects(Money Given). i Need to Calculate the sum of total amount (Array) existing in those objects (All money given to each person)

//Like to say, all the credits relative to each Person.

I use to do that with Php, but how can i do that with computed ?

Vuejs code :

var app = new Vue({
el: '#app',
data: {
   persons:[],
},
methods: {
getPersons (),
},

Thanks you !

Here is a sample of persons. multiples objects, and inside each object, usercashfloats with multiple objects i need to calculate the amount . (Amount exist in each these objects)

Thank you sir, i add a picture for u, i want to calculate the sum of amount existing in all objects existing in usercashfloat — yassine j
– yassine j, Commented Dec 27, 2018 at 19:51
i provided an answer by assuming that each item in usercashfloat array has amount property — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 27, 2018 at 20:01
Yes, sir, in each object inside usercashfloat there is amount.. — yassine j
– yassine j, Commented Dec 27, 2018 at 21:11

Boussadjra Brahim · Accepted Answer · 2018-12-27 22:19:58Z

2

Your computed property should be like :

  computed:{
      personsWithAount(){

             const reducer = (accumulator, currentValue) => accumulator.amount + currentValue.amount;
              return  this.persons.map((pers)=>{
                      let p=pers;
                      if(pers.usercashfloat.length==0){

                       p.totalAmount=0;
                       }else if(pers.usercashfloat.length==1){
                           p.totalAmount=pers.usercashfloat[0].amount;

                       }else{
                            p.totalAmount=pers.usercashfloat.reduce(reducer);
                       }
                     return p;
                     });


          }
       }

reduce function doc

and in your template you will have something like :

 <div class="col-md-3" v-for="person in personsWithAmount">
     {{person.totalAmount}}
 </div>

edited Dec 27, 2018 at 22:19

answered Dec 27, 2018 at 19:42

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

yassine j Over a year ago

Thank you sir, i got error during evaluation .. also, how i'm supposed to call total of each person in blade ?

Maxim · Accepted Answer · 2018-12-27 20:55:43Z

2

It could be like this:

<div class="col-md-3" v-for="person in preparedPersons">
</div> 

var app = new Vue({
el: '#app',
data: {
   persons:[],
},
computed: {
   preparedPersons : function() {
      return this.persons.map(
         (p) => {
             return {
                   ...p, 
                   sumOfAmount: p.usercashfloat.reduce(
                       (acc, cur) => acc.amount + cur.amount
                   )
              };
          }
      )
   }
},
methods: {
getPersons (),
},

edited Dec 27, 2018 at 20:55

answered Dec 27, 2018 at 19:49

Maxim

2,40110 silver badges17 bronze badges

5 Comments

yassine j Over a year ago

Thank you sir, i add a picture for u, i want to calculate the sum of amount existing in all objects existing in usercashfloat's objects

Maxim Over a year ago

what is structure of usercashfloat object ?

Maxim Over a year ago

@yassinej I made changes to the answer so it should works for you fine

yassine j Over a year ago

Thank you sir, i got error during evaluation .. also, how i'm supposed to call total of each person in blade ?

Maxim Over a year ago

it will be like <span>Amount is {{person.sumOfAmount}} </span>

Collectives™ on Stack Overflow

VueJs / Laravel. Sum of Multiple arrays in different objects

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related