Слияние двух объектов возвращает неопределенное

Question

У меня есть два Object и я хочу объединить эти два объекта. один объект создается после click в разделе ADD TO CART , затем я сохраняю этот объект в localstorage, второй объект получается из localstorage, теперь я хочу объединить эти два object после щелчка. вот мой код:

/***********************************RESTORE CART *********************************************/

var html = '';
var p = 0;
var q = 0;

//var cartS = JSON.parse(localStorage.getItem("cart"));
// for remove error I managed to set empty object

var cartS = new Object();

$.each(cartS, function(i, v) {
  html += '<div class="cart-item" data-id="' + cartS[i].id + '">' + cartS[i].title + '<span> × ' + cartS[i].quantity + '</span> ' + cartS[i].price + ' $</div>';
  p += Number(cartS[i].price * cartS[i].quantity);
  q += cartS[i].quantity;
});
$('#cart').empty().html(html);
$('#total').empty().html('Total price: ' + p + ' $');
$('#count').empty().html('Total Items: ' + q);

/***********************************ADD TO CART *********************************************/

const cart = {};

$('li').click(function(e) {
  const id = e.target.dataset.id;
  const title = $(this).text();
  const price = e.target.dataset.price;

  var html = '';
  var p = 0;
  var q = 0;

  if (!cart[id]) cart[id] = {
    id,
    title,
    price,
    quantity: 0
  }
  cart[id].quantity++;

  $.each(cart, function(i, v) {
    html += '<div class="cart-item" data-id="' + cart[i].id + '">' + cart[i].title + '<span> × ' + cart[i].quantity + '</span> : ' + cart[i].price + ' $</div>';
    p += Number(cart[i].price * cart[i].quantity);
    q += cart[i].quantity;
  });

  $('#cart').empty().html(html);
  $('#total').empty().html('Total price:' + p + ' $');
  $('#count').empty().html('Total Items: ' + q);

  //localStorage.setItem("cart", JSON.stringify(cart)); // store objects in localstorage
});

#total {
  color: green;
}

a {
  display: block;
}

.cart-item {
  background: #ffe1e1;
  margin-bottom: 1px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-id="1" data-price="50">Product 1</li>
  <li data-id="2" data-price="25">Product 2</li>
  <li data-id="3" data-price="15">Product 3</li>
  <li data-id="4" data-price="50">Product 4</li>
</ul>

<div id="cart"></div>
<br><br>
<a id="total"></a>
<a id="count"></a>

Что я пробовал:

Array.prototype.push.apply(cart,cartS);

Также:

$.merge( cartS, cart );

Но это не слияние.

Обратите внимание, что фрагмент кода возвращает ошибку, поскольку SO не поддерживает localstorage.

ЗАДАЧА:

Я создаю объект после щелчка и сохраняю его в localstorage, затем после перезагрузки страницы я получаю объект из localstorage, теперь хочу, если пользователь нажал, объединить текущий объект со вторым, который я получил из localstorage. Это похоже на магазинную тележку.

Answer 1

И cartS, и cart являются объектами, а не массивами. Вместо использования $.merge, который предназначен только для массивов, рассмотрите возможность использования $.extend:

$.extend( cartS, cart );

Answer 2

$.merge() - для объединения двух массивов . cart и cartS - это простые объекты, а не массивы.

Но почему у вас в корзине два отдельных предмета? Вы можете просто обновить объект, который вы прочитали из localStorage.

Answer 3

Вы можете использовать метод Object.assign для объединения двух объектов.

let newObject = Object.assign(cart, cartS)