add up all value's of a property in an array Vuejs

Question

I am working on a small app and I have a array with objects and within the objects 2 property's, one called 'label' and one 'value'. What I would like is to add up all values of the property 'value', So that I have one total value.

Vue/JS

data() {

totalRequest: 0,

   donutData: [
        { label: 'Openstaande verzoeken', value: 20 },
        { label: 'Geaccepteerde verzoeken', value: 25 },
        { label: 'Afgewezen verzoeken', value: 10 }
    ],

},

created() {
        this.totalRequest = //here goes the function to add up all value's of the property 'value' (total value should be 55)
}

HTML

total value {{ totalRequest }}

So in this example I have 3 objects with a total value of 55 (all 3 property 'value'). How can I achieve this? Thanks in advance.

Answer by dashton, reproduced for vue

created() {
        this.totalRequest = this.donutData.reduce((acc, item) => acc + item.value, 0);
}

Array.Reduce is all you need. donutData.Reduce( (acc, item) => { return acc += item.value; }, 0); — Botonomous
– Botonomous, Commented May 2, 2017 at 11:59
I've tried it with Array.Reduce but that didn't worked. Is that possible with objects? I need the second property in the object. — Giesburts
– Giesburts, Commented May 2, 2017 at 12:01

dashton · Accepted Answer · 2017-05-02 12:01:56Z

15

This will work:

var sum = donutData.reduce((acc, item) => acc + item.value, 0);

answered May 2, 2017 at 12:01

dashton

2,7341 gold badge18 silver badges16 bronze badges

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

3 Comments

Giesburts Over a year ago

Alright this is awesome. I will reproduce the answer in my question specific for VueJS.

Kiran Maniya Over a year ago

When we introduce the local variable to get a sum of array value in Vuex computed property, it loses the reactivity. This solution overcomes that issue.

Andrew West Over a year ago

This isn't summing up the values for me, rather so just adding them together literally. E.g my vals are 800 and 200, my output is 800200

tony19 · Accepted Answer · 2022-07-15 04:32:21Z

14

This has nothing to do with vue, seems like a javascript question, there's tons of way of doing this, the simpler would be just do a forEach:

es4:

for(i in donutData) { this.totalRequest += donutData[i].value; }

BUT as you asked how to show {{ totalRequest }} you might want to look at computed properties:

https://v2.vuejs.org/v2/guide/computed.html

Which is a way vue has to dynamically set data in views, so you could take dashton's answer and do:

HTML

total value {{ totalRequest }}

Vue/js

data() {
   donutData: [
        { label: 'Openstaande verzoeken', value: 20 },
        { label: 'Geaccepteerde verzoeken', value: 25 },
        { label: 'Afgewezen verzoeken', value: 10 }
    ],

},
computed: {
    totalRequest() {
      return this.donutData.reduce((acc, item) => acc + item.value, 0);
    }
}

edited Jul 15, 2022 at 4:32

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 2, 2017 at 12:09

Gerardo Rosciano

9015 silver badges12 bronze badges

1 Comment

Deepak Over a year ago

Using computed at such places is a better approach. +1.

Dennis Kiprotich · Accepted Answer · 2022-06-01 15:24:30Z

1

All the given responses seems okay, if you still face the problem and you have the exact code, just make sure your data(value to sum) is an integer.

For instance, if value = "12" and "34" you will get "1234" as the result instead of 46

Use parseInt() to convert to integer:

array.reduce((acc, item) => acc +parseInt( item.value), 0)

answered Jun 1, 2022 at 15:24

Dennis Kiprotich

1311 silver badge5 bronze badges

3 Comments

Andrew West Over a year ago

My values are still doing a literal add, even using parseInt()

Dennis Kiprotich Over a year ago

The reduce function syntax is array.reduce((total, currentValue) => total+ current, initialValue) . Failure to provide the initialValue can lead to failure to return the expected response. Do test the array if you will get the right values before reducing

Andrew West Over a year ago

My fix was to implement the parseInt() around the actual output, not the computation/method {{parseInt(function_name)}}

Collectives™ on Stack Overflow

add up all value's of a property in an array Vuejs

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related