JQuery изменяет значение в исходном массиве

Question

Я строю простую корзину.

Сначала у меня есть массив предметов, называемых ваучерами - например:

"[{"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":"£100 Gift Voucher","price":"100.00","photo":"1102/qexxflg.jpg"}]"

и cart = [];

Теперь у меня естьфункция для добавления элементов в массив CART:

//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);

    };

, и это хорошо работает и добавляет Item в CART, но также изменяет значения в массиве ваучеров.Зачем?Почему data.total добавляется в объект в массиве ваучеров ...

Мне нужен массив ваучеров с неизменяемыми значениями ... Почему, когда я изменяю значения таким образом, он связывает значения в массив ваучеров.

Answer 1

Просто клонируйте любой тип массива с:

[].concat(data);

, так как concat может не работать в некоторых браузерах IE, вы можете использовать это:

new_array = old_array.slice(0);

или вы можете использовать

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

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