Jquery changing value at original array

Question

I build a simple cart.

First I have an array of items called vouchers - like:

"[{"id":"108","name":"Gourmet Tasting Menu for Two","price":"85.00","photo":"1102/KtOdtlg.jpg"},{"id":"109","name":"Sampler Menu for Two","price":"60.00","photo":"1102/YrLaHlg.jpg"},{"id":"127","name":"&pound;100 Gift Voucher","price":"100.00","photo":"1102/qexxflg.jpg"}]"

and cart = [];

Now I have a function to add items to CART array:

//with this function based on ID I find object into vouchers array and push that into CART array


    function addItemToCart (id) {
        qty = $('#qty').val();
        var data = $.grep(vouchers, function(e){ return e.id == id; });
        data = data[0];
        data.voucher_id = id;
        data.to = $('#to').val();
        data.from = $('#from').val();
        data.isGift = 0;
        data.recipient_email = $('#recipient_email').val();
        if (data.recipient_email != '') {
            data.isGift = 1;
        }
        data.message = $('#message').val();
        data.qty = qty;
        data.total = qty*data.price;
        cart.push(data);

    };

and this works good and add Item into the CART but also change values in vouchers array. Why? WHy data.total is added into the object in vouchers array...

I need vouchers array to be with unchangeable values... Why when I change values this way it binds values into vouchers array.

Possible duplicate of [Modifying a copy of a JavaScript object is causing the original object to change](https://stackoverflow.com/questions/29050004/modifying-a-copy-of-a-javascript-object-is-causing-the-original-object-to-change) — Herohtar, Oct 05 '18 at 15:13

Negi Rox · Answer 1 · 2018-10-05T15:22:03.263

1

Simply clone any type of array with:

[].concat(data);

since concat may not work in some IE browsers, you can use this:

new_array = old_array.slice(0);

or you can use

var clonedArray = JSON.parse(JSON.stringify(originalArray))

var clonedArray = $.map(originalArray, function (obj) {
                  return $.extend({}, obj);
              });

edited Oct 05 '18 at 15:22

answered Oct 05 '18 at 15:15

Negi Rox

3,828
1
11
18

so I need to change line data = data[0]; with your code ? – Aleks Per Oct 05 '18 at 15:18
I got Uncaught TypeError: data.slice is not a function – Aleks Per Oct 05 '18 at 15:20
you need a deep copy when you are using a grep it is searching in same array. due to reference you are changing your original value. – Negi Rox Oct 05 '18 at 15:20
But GREP isn't supposed to change the original array? – 11teenth Apr 25 '20 at 20:52

Jquery changing value at original array

1 Answers1