Не могу добавить несколько li с помощью jquery

Question

У меня есть корзина для покупок, и заказы были на json, и я хочу выполнить цикл из этого файла json, а затем добавить li, соответствующий этим данным в цикле, я использую jquery

, используя imtemplate

<script id='cartItem' type='text/template'>
        <li>
            <div class="item-wrap">
                <div class="quantity-wrap">
                    <input type="number" name="Quantity" min="0" value="" />
                </div>
                <div class="info-wrap">
                    <p class="item-name">Item 1</p>
                    <div><p class="item-qpu">quantity per unit sdfsdfsdf</p></div>
                    <p class="item-price">Price: 12.55</p>
                </div>
                <div class="info-total">
                    <div>
                        <p><i>Total:</i></p>
                        <h3 class="item-total">202</h3>
                    </div>
                </div>
                <div class="remove-item">
                    <a href="#" class="remove">&times</a>
                </div>
            </div>
        </li>
    </script>

это основной контент

<div class="sidebar">
    <div>
        <h3>Orders</h3>
        <hr />
    </div>
    <ul class='cart-items' id="cart-items">

    </ul>
</div>

<div class="content">
    <div class="col-sm-4" style="background-color:yellow;">
        <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8" style="background-color:pink;">
        <p>Sed ut perspiciatis...</p>
    </div>
</div>

это мой скрипт Jquery

  <script>


        $(document).ready(function () {
            var cart = $('.cart-items');
            function pops() {
                var $template = $($('#cartItem').text());
                cart.empty();
                carted_prods.forEach(function (element, index) {
                    $template.find('input').val(element.itemQuantity);
                    $template.find('.item-name').text(element.itemName);
                    $template.find('li').addClass('no' + index.toString);
                    $("#cart-items").append($template);
                    console.log($template);
                });
        }
        pops();
    });
</script>

и отображается только последняя запись json

Answer 1

Вам нужно переместить var $template = $($('#cartItem').text()); внутрь петли forEach(). В противном случае вы вносите один и тот же элемент в каждую итерацию цикла вместо создания новых.

carted_prods.forEach(function(element, index) {
  let $template = $($('#cartItem').text());
  $template.find('input').val(element.itemQuantity);
  $template.find('.item-name').text(element.itemName);
  $template.find('li').addClass('no' + index.toString);
  $("#cart-items").append($template);
});

Рабочий пример:

let carted_prods = [{
  itemQuantity: 1,
  itemName: 'Lorem',
}, {
  itemQuantity: 2,
  itemName: 'Ipsum',
}, {
  itemQuantity: 3,
  itemName: 'Dolor',
}, {
  itemQuantity: 4,
  itemName: 'Sit',
}]

$(document).ready(function() {
  var cart = $('.cart-items');
  
  function pops() {
    cart.empty();
    carted_prods.forEach(function(element, index) {
      let $template = $($('#cartItem').text());
      $template.find('input').val(element.itemQuantity);
      $template.find('.item-name').text(element.itemName);
      $template.find('li').addClass('no' + index.toString);
      $("#cart-items").append($template);
    });
  }
  pops();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script id='cartItem' type='text/template'>
  <li>
    <div class="item-wrap">
      <div class="quantity-wrap">
        <input type="number" name="Quantity" min="0" value="" />
      </div>
      <div class="info-wrap">
        <p class="item-name">Item 1</p>
        <div>
          <p class="item-qpu">quantity per unit sdfsdfsdf</p>
        </div>
        <p class="item-price">Price: 12.55</p>
      </div>
      <div class="info-total">
        <div>
          <p><i>Total:</i></p>
          <h3 class="item-total">202</h3>
        </div>
      </div>
      <div class="remove-item">
        <a href="#" class="remove">&times</a>
      </div>
    </div>
  </li>
</script>
<div class="sidebar">
  <div>
    <h3>Orders</h3>
    <hr />
  </div>
  <ul class='cart-items' id="cart-items"></ul>
</div>

<div class="content">
  <div class="col-sm-4" style="background-color:yellow;">
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-sm-8" style="background-color:pink;">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>