How do I get Total sum of a column in Vue JS

user_9543351 0
Viewed 4055

As in the Attached picture it not getting the total right.

You can add a row manually and each row is in "items" array

items: [
  {
    occuGroup:'',
    constType:'',
    bfloorArea: 0,
    cfloorArea: 0
  },
],

Here's the code that I wrote to get Total

subTotal: function() {
  var total = 0;
  this.items.forEach(element => {
    total += (element.bfloorArea);
  });
  return total;
},

How do I get that right? Thanks

vue.js javascript
5 Answers

I would combine map and reduce array functions:

subtotal() {
  return this.items
    .map(({bfloorArea}) => bfloorArea)
    .reduce((a, b) => a + b, 0)
}

Using map this way you get a new array containing only the values of bfloorArea, and with reduce you get the total sum of those values.

Hope that helps!

Note: If you need the total of any other property you can just change "bfloorArea" for the property you want. If the property is not in Number type but a string, you can cast it to number when mapping:

.map(({propertyToCast}) => Number(propertyToCast))
user_107621960

It seems to be you are concat string. You will need to convert string to int for your summation.

this.items.forEach(element => {
    total += parseInt(element.bfloorArea);
  });
user_51505580

The problem with your code is you are adding items as a string instead, you need number type.

subTotal: function() {
  return this.items.reduce((acc, ele) => {
    return acc + parseInt(ele.bfloorArea);
  }, 0);
},


function subTotal(items) {
  return items.reduce((acc, ele) => {
    return acc + parseInt(ele.bfloorArea);
  }, 0);
}

const items = [
  {
    occuGroup: "",
    constType: "",
    bfloorArea: 0,
    cfloorArea: 0,
  },
  {
    occuGroup: "",
    constType: "",
    bfloorArea: 4,
    cfloorArea: 0,
  },
  {
    occuGroup: "",
    constType: "",
    bfloorArea: 6,
    cfloorArea: 0,
  },
];

console.log(subTotal(items));

user_91534480

Another solution without using object destructing could be

return this.items.map(item => item.bfloorArea)
    .reduce((prev, current) => prev + parseInt(current,10), 0);
user_112811520

Use correct input type

I want to give a different option. Many suggested to convert the string from the input field, since the default type of an input is string.

You didn't include template data so I am just assuming you are in fact using a standard input field like (or something similar)

<input v-bind="item.bFloorArea" />

In Vue you already have the inbuilt option to automatically typecast the input as a Number, therefore your initial code could have worked if you used something like

<input v-bind.number="item.bFloorArea" type="number" />

Please note the modifier .number for Value Binding ( From the docs : https://v2.vuejs.org/v2/guide/forms.html#number )

ā— This would also disallow for the user to input text into a field which clearly needs a number

user_73768540
Related