Sum all of the property values in an array using Vue.js

Question

Sum all of the property values in an array using Vue.js

I'm currently developing a small app and have an array of objects with two properties each: 'label' and 'value'. I want to calculate the total value by adding up all the values in the 'value' property.

Vue/JS

data() {

totalRequest: 0,

   donutData: [
        { label: 'Pending requests', value: 20 },
        { label: 'Accepted requests', value: 25 },
        { label: 'Rejected requests', value: 10 }
    ],

},

created() {
        this.totalRequest = //Functionality needed to sum up all values in the 'value' property (total should be 55)
}

HTML

total value {{ totalRequest }}

In this example, there are 3 objects with a total value of 55 (the sum of all 3 'value' properties). How can I achieve this? Thank you in advance.

Answer by dashton, adapted for vue

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

javascript arrays vue.js vuejs2

Answer 1

Answer №1

Here is a solution that should do the trick:

let total = donutData.reduce((accumulator, currentItem) => accumulator + currentItem.value, 0);

Answer 2

Here is a solution that should do the trick:

let total = donutData.reduce((accumulator, currentItem) => accumulator + currentItem.value, 0);

Answer 3

Answer №2

This solution does not involve Vue at all, but rather a JavaScript approach. There are various ways to achieve the desired result, with one simple method being to use a forEach loop:

ES4:

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

If your goal is to display {{ totalRequest }}, you may want to consider utilizing computed properties:

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

Computed properties in Vue allow for dynamic data integration into views. For example, you could follow dashton's response by implementing the following code:

HTML

Total value: {{ totalRequest }}

Vue/JS

data() {
   donutData: [
        { label: 'Open Requests', value: 20 },
        { label: 'Accepted Requests', value: 25 },
        { label: 'Rejected Requests', value: 10 }
    ],

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

Answer 4

This solution does not involve Vue at all, but rather a JavaScript approach. There are various ways to achieve the desired result, with one simple method being to use a forEach loop:

ES4:

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

If your goal is to display {{ totalRequest }}, you may want to consider utilizing computed properties:

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

Computed properties in Vue allow for dynamic data integration into views. For example, you could follow dashton's response by implementing the following code:

HTML

Total value: {{ totalRequest }}

Vue/JS

data() {
   donutData: [
        { label: 'Open Requests', value: 20 },
        { label: 'Accepted Requests', value: 25 },
        { label: 'Rejected Requests', value: 10 }
    ],

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

Answer 5

Answer №3

While all the responses provided appear to be correct, if you continue to encounter issues and have the specific code on hand, it is crucial to ensure that your data (the values you are summing) are in integer format.

For example, if the value is set as "12" and "34", the result will be "1234" instead of 46.

To convert to an integer, use parseInt() method:

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

Answer 6

While all the responses provided appear to be correct, if you continue to encounter issues and have the specific code on hand, it is crucial to ensure that your data (the values you are summing) are in integer format.

For example, if the value is set as "12" and "34", the result will be "1234" instead of 46.

To convert to an integer, use parseInt() method:

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

Sum all of the property values in an array using Vue.js

Answer №1

Answer №2

Answer №3

Similar questions

struggling to determine the connection status between tables (Many-to-many or one-to-one)

Are there any methods to determine the way in which a user has absorbed the content of a post

How to fetch select element within a table by using jQuery

MongoSessionEndedError: Session expired and cannot be utilized

Having trouble with my loop using Jquery's $.get method

Tips for Comparing and Extracting Values from Two Arrays of Objects

Steps for choosing a row from a dynamic table when clicking the mouse

Ajax removes the selection from the hyperlink under the mouse cursor

Placing options and a clickable element within a collapsible navigation bar

What is the name of the JavaScript code editor that includes line numbering for plain text?

Aligning the second heading alongside pictures and a lightbox

Copying data with CUDA involves transferring an array of pointers, where each pointer references its own array

Accessing each element within a Next.js application through a personalized hook during page load

Utilize Vuex's $store.getters within a component's method() function

BX-Slider allows for the insertion of Prev and Next Arrows in both the Main Div and Inner Divs

How to Handle an Empty Route with a Trailing Slash in Backbone Routing?

What is the best way to automatically place the cursor in a text box when a webpage is loaded using JavaScript?

Ensure that the landing image remains in place and covered as I continue scrolling

Manipulating the position of particles in a THREE.ParticleSystem using Three.js

The Angular data model fails to update when the URL is modified