How to sum two similar Objects in Javascript / vuejs

Question

I have an object and I need to sum every value independently with another similar object like in this example :

CharacterStats: { a: 0, b: 2, c: 0, d: 0 }
ItemStats: { a: 0, b: -1, c: 4, d: 0 }

The result should be:

CharacterStats: { a: 0, b: 1, c: 4, d: 0 }

I found this answer How to sum two object values in javascript But I'm using vueJS so my function looks something like this:

export default {
  data () {
    return {
      CharacterStats: { a:0, b:0, c:0, d:0 }
    };
  },
  methods: {
    calculStatsItems(ItemsStats)  {
      var obj = {};
      Object.keys(this.CharacterStats ).forEach(function(a){
        obj[a] = this.CharacterStats.stat[a] +ItemsStats[a]
      })
      console.log(obj);
    }
  },
}

But I keep getting an error telling me

This is undefined

on this line:

Object.keys(this.CharacterStats ).forEach(function(a)

Is there another way to do it or fix it?

Does this answer your question? How to access the correct `this` inside a callback? — Heretic Monkey
– Heretic Monkey, Commented Feb 6, 2021 at 22:14

AdriSolid · Accepted Answer · 2021-02-07 08:44:21Z

1

You can get the values of both objects, and then make the operation, doing something like:

sum(values) {
  return values.reduce((a, b) => a + b, 0);
}

calculStatsItems(arr1, arr2) {
  const prepareData = [...Object.values(arr1), ...Object.values(arr2)];
  return this.sum(prepareData);
}

edited Feb 7, 2021 at 8:44

answered Feb 6, 2021 at 21:49

AdriSolid

2,8231 gold badge10 silver badges18 bronze badges

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

Comments

Majed Badawi · Accepted Answer · 2021-02-06 22:01:44Z

0

In the .forEach function, this doesn't refer to the vue component instance, so CharacterStats becomes undefined. Try this:

const CharacterStats = { a: 0, b: 2, c: 0, d: 0 };
const ItemStats = { a: 0, b: -1, c: 4, d: 0 };

new Vue({
  el:"#app",
  data: () => ({
    CharacterStats: { a: 0, b: 2, c: 0, d: 0 }
  }),
  created() {
    this.calculStatsItems({ a: 0, b: -1, c: 4, d: 0 });
  },
  methods: {
    calculStatsItems(ItemsStats) {
      const obj = {};
      Object.keys(this.CharacterStats).forEach(a => {
        obj[a] = this.CharacterStats[a] + (ItemsStats[a] || 0)
      });
      console.log(obj);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

answered Feb 6, 2021 at 22:01

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

2 Comments

Mathieu Barco Over a year ago

I only took the method itself and it worked like a charm ! Thank you very much

Majed Badawi Over a year ago

You're welcome! arrow-functions solved the issue.

Collectives™ on Stack Overflow

How to sum two similar Objects in Javascript / vuejs

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related