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 undifined" 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?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Heretic Monkey, Feb 06 '21 at 22:14

AdriSolid · Answer 1 · 2021-02-07T08:44:21.870

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 07 '21 at 08:44

answered Feb 06 '21 at 21:49

AdriSolid

2,570
1
7
17

score 0 · Accepted Answer · answered Feb 06 '21 at 22:01

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>

I only took the method itself and it worked like a charm ! Thank you very much — Mathieu Barco, Feb 06 '21 at 22:20

How to sum two similar Objects in Javascript / vuejs

2 Answers2