How to calculate array of numbers in vuejs

Question

I have array. in that array there is a field name debit. I want to add all the debit on this array and find the total. I am trying to do this with reduce function. but it's adding number as character not calculating the sum of the array number. here is the code

export default {
    data() {
        return {
            fields: {
                debit: 0,
                credit: 0,
                type: '',
            },
            fields: [],
            allDebit: 0,
            allCredit: 0,
        }
    },
    methods: {
        newfield() {
            this.fields.push({
                debit: 0,
                credit: 0,
                type: '',
            })


        },
        dataRemove(index) {
            Vue.delete(this.fields, index);
        },
        calculate() {
            this.allDebit = this.fields.reduce((acc, item) => acc + item.debit, 0);


        }

    }
}

output:

{
  "fields": [
    {
      "debit": "4",
      "credit": "2",
      "type": ""
    },
    {
      "debit": "4",
      "credit": "2",
      "type": ""
    }
  ],
  "allDebit": "044",
  "allCredit": 0
}

how should i do it it? can you give me an example? @entio

Jubayer Ahmed
– Jubayer Ahmed

2019-08-02 06:25:27 +00:00
Commented Aug 2, 2019 at 6:25 — Jubayer Ahmed
– Jubayer Ahmed, Commented Aug 2, 2019 at 6:25

entio · Accepted Answer · 2019-08-02 06:26:41Z

1

 fields: {
                debit: 0,
                credit: 0,
                type: '',
 },
 fields: [],

You specify object fields and array in the data. You cannot have an object with two identical keys in the object literal. That is not a valid JS. I wouldn't be surprised if that was the reason.

Also, your values in output seem to all be strings. Try parseInt function in the reduce function.

answered Aug 2, 2019 at 6:26

entio

4,3442 gold badges29 silver badges40 bronze badges

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

1 Comment

Jubayer Ahmed Over a year ago

how should i do it? any suggestion?

沈鑫Real · Accepted Answer · 2019-08-02 07:47:55Z

0

convert string to number and then sum them

 calculate() {
            this.allDebit = this.fields.reduce((acc, item) => Number(acc) + Number(item.debit), 0);


        }

answered Aug 2, 2019 at 7:47

沈鑫Real

1

Comments

Andriy Kuba · Accepted Answer · 2019-08-02 07:48:31Z

0

Rename first fields to field, or remove it completely, I do not see where do you use it.
Parse to integer item.debit either in the accumulator or in the place where do you set it.

The possible fix:

export default {
    data() {
        return {
            field: {
                debit: 0,
                credit: 0,
                type: '',
            },
            fields: [],
            allDebit: 0,
            allCredit: 0,
        }
    },
    methods: {
        newfield() {
            this.fields.push({
                debit: 0,
                credit: 0,
                type: '',
            })


        },
        dataRemove(index) {
            Vue.delete(this.fields, index);
        },
        calculate() {
            this.allDebit = this.fields.reduce((acc, item) => acc + parseInt(item.debit), 0);


        }

    }
}

answered Aug 2, 2019 at 7:48

Andriy Kuba

8,2732 gold badges31 silver badges46 bronze badges

2 Comments

Jubayer Ahmed Over a year ago

this works! thank you! i don't have enough reputation for votting.

Andriy Kuba Over a year ago

@JubayerAhmed but you can check it as the correct answer :)

kengres · Accepted Answer · 2019-08-02 07:49:59Z

export default {
  data() {
    return {
      fields: { // this is identical to the fields: [] array
        // you need to rename it to something like field (Singular)
        debit: 0,
        credit: 0,
        type: '',
      },
      // maybe you ment
      field: { // field (Singular)
        debit: 0,
        credit: 0,
        type: '',
      },
      // 
      fields: [], // THIS !!!
      allDebit: 0,
      allCredit: 0,
    }
  },
  methods: {
    newfield() {
      this.fields.push({
        debit: 0,
        credit: 0,
        type: '',
      })


    },
    calculate() {
      const { debit } = this.fields.reduce((acc, item) => {
        return { debit: acc.debit + item.debit };
      }, { debit: 0 })
      this.allDebit = debit;
    }

  }
}

You can't have 2 identical keys in the data function property.

krismeister1993 · Accepted Answer · 2019-08-02 09:46:15Z

0

I would do this in a computed property instead, so that the value is calculated again if fields changes.

computed: {
   allDebit() {
     return this.fields.reduce((acc, item) => acc + parseInt(item.debit), 0);
   }
}

EDIT: You can't have two properties with the same key in your data function. You have fields two times.

edited Aug 2, 2019 at 9:46

answered Aug 2, 2019 at 9:40

krismeister1993

613 bronze badges

Collectives™ on Stack Overflow

How to calculate array of numbers in vuejs

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related