Gathering values from sub objects in Vue.JS and assigning to parent object key

Question

Here's what the data "valueContainer" looks like:

{
         "totalValue": 0,
         "subValues1": [
           { "value": 20 },{ "value": 30 }
         ],
         "subValues2": [
           { "value": 10 },{ "value": 40 }
         ]
        }

I'm trying to gather the values from 'subValues1' and 'subValues2' and store them in the 'totalValue' field? I've been trying to use computed but the for loop isn't working, here's an example of trying to accumulate values from the first sub object

  computed: {
    totalValue: function() {
      let total;
      for (let v in this.valueContainer.subValues1) {
        total = total + v.value;
      }
      return total;
    }
  }

As written I'm getting NaN for the totalValue. How can I loop through the values, accumulate the values, and store them as totalValue?

Link to codepen: https://codepen.io/connorontheweb/pen/dyPvwmE

Thanks for catching that. It actually is an array, editing now — connorcode
– connorcode, Commented Dec 20, 2019 at 18:38
Your data is not valid javascript btw. Can you create a codepen? — akuiper
– akuiper, Commented Dec 20, 2019 at 18:39
yes you can access the value like so this.valueContainer.subValues1[v], or use other iterations like for...of loop, Array.forEach — Chris Li
– Chris Li, Commented Dec 20, 2019 at 19:53

Nina Scholz · Accepted Answer · 2019-12-20 18:45:30Z

1

You could get the keys, filter by unwanted and iterate the values arrays. Then add the values to total.

var data = { valueContainer: { totalValue: 0, subValues1: [{ value: 20 }, { value: 30 }], subValues2: [{ value: 10 }, { value: 40 }] } };

Object
    .keys(data.valueContainer)
    .filter(v => v !== 'totalValue')
    .forEach(k => data.valueContainer[k].forEach(({ value }) => data.valueContainer.totalValue += value));

console.log(data);

answered Dec 20, 2019 at 18:45

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

David Weldon · Accepted Answer · 2019-12-20 18:56:33Z

Here's a working component:

<template>
  <div>{{ totalValue }}</div>
</template>

const sum = list => list.reduce((acc, value) => acc + value, 0);

export default {
  data() {
    return {
      valueContainer: {
        subValues1: [{ value: 20 }, { value: 30 }],
        subValues2: [{ value: 10 }, { value: 40 }],
      },
    };
  },
  computed: {
    totalValue() {
      const { subValues1, subValues2 } = this.valueContainer;
      const values = [...subValues1, ...subValues2].map(({ value }) => value);
      return sum(values);
    },
  },
};

If you are using lodash, you could simplify this a bit with sumBy:

import sumBy from 'lodash/sumBy';

export default {
  data() {
    return {
      valueContainer: {
        subValues1: [{ value: 20 }, { value: 30 }],
        subValues2: [{ value: 10 }, { value: 40 }],
      },
    };
  },
  computed: {
    totalValue() {
      const { subValues1, subValues2 } = this.valueContainer;
      return sumBy([...subValues1, ...subValues2], 'value');
    },
  },
};

Collectives™ on Stack Overflow

Gathering values from sub objects in Vue.JS and assigning to parent object key

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related