source data changed when using reduce in Nuxtjs

Question

My code:

export default {
  data() {
    return {
      services: [],
      mydata: [
        {id: 1, count: 102, price: 0.1},
        {id: 1, count: 0, price: 0.09},
        {id: 2, count: 20, price: 0.5},
      ]
    };
  },
  mounted() {
    this.start();
  },
  methods: {
    start() {
      this.services = this.mydata.reduce((acc, curr) => {
        let item = acc.find((obj) => obj.id == curr.id);
        if (item) {
          item.count += curr.count;
          item.price = item.price > curr.price ? curr.price : item.price;
        } else {
          acc.push(curr);
        }
        return acc;
      }, []);
    },
  },
};

I want merge the mydata array and save into a services variable. I want that the counts to be sum and the lower price to be selected for the new object. (I used reduce for doing this)

My expected services:

[
        {id: 1, count: 102, price: 0.09},
        {id: 2, count: 20, price: 0.5},
]

It's works but the source data (which is mydata) manipulated and converted to this: (the first object's price manipulated and converted to 0.09 which it was 0.1 before)

[
        {id: 1, count: 102, price: 0.09},
        {id: 1, count: 0, price: 0.09},
        {id: 2, count: 20, price: 0.5}
]

Why does this happen?

Remove the observable attached to mydata: JSON.parse(JSON.stringify(this.mydata)).reduce... — Ohgodwhy
– Ohgodwhy, Commented Aug 24, 2020 at 19:54

Magiczne · Accepted Answer · 2020-08-24 20:06:34Z

1

What happens?

You're actually modyfying mydata.

It happens when you find object in the array:

let item = acc.find((obj) => obj.id == curr.id);

and then modify it

item.count += curr.count;
item.price = item.price > curr.price ? curr.price : item.price;

Why it happens?

In JavaScript we have two types od data types.

Primitive types (Boolean, String, Number, null, undefined) and they are passed by value.
Array, Function and Object which are are passed by reference

In your case you're finding some object in the array and then modify its properties which means you're operating on the reference.

How to do it?

If you have array of primitive types you can make shallow copy using for example spread operator:

let arr = ['a', 'b', 'c']
[...arr].reduce()

If you have array of complex types you need to write custom fuction or use some library which implements it for you like Lodash or Ramda

edited Aug 24, 2020 at 20:06

answered Aug 24, 2020 at 20:00

Magiczne

1,6112 gold badges17 silver badges25 bronze badges

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

2 Comments

Saman Over a year ago

Thanks. I used JSON.parse(JSON.stringify(this.mydata)).reduce... and it worked. Does it have an equivalent in Lodash?

Magiczne Over a year ago

@FredII Have in mind that using JSON.parse method will lose information about some data. If your objects contain undefined, NaN, Infinity or functions all of them will be replaced with null. Lodash has _.cloneDeep function

Collectives™ on Stack Overflow

source data changed when using reduce in Nuxtjs

1 Answer 1

What happens?

Why it happens?

How to do it?

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

What happens?

Why it happens?

How to do it?

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related