How to display the contents of the array by changing the structure ID dynamically?

Question

I am trying to display the array products, however, I cannot change the Ids dynamically so that all products are displayed. So far, I can only display 1 product, because the ID is fixed, as shown in the js below.

//CAMISAS
var j = jQuery.noConflict();
j(document).ready(function() {

      j(document).on("click", "ul#menu li.nav-item#1", function() {
        j.getJSON('/api/V1/categories/1', function(data) {
          console.log(data.items);
          var myArray = data.items;
          //I tried to use For, but that way it only displays 1 product instead of all products in the array
          //for (var i = 0; i < myArray.length; i++) {			

          var insertHtmlShirt = `<div class="card" id="${data.items[2].id}">
				        <img class="card-img-top" src="${data.items[1].image}" alt=" "/>
				        <div class="card-body">
				            <h5 class="card-title">${data.items[1].name}</h5>
				            <p class="card-text">R$ ${data.items[1].price}</p>
				            <a href="#" class="btn btn-primary">COMPRAR</a>
				        </div>
				    </div>`;
          jQuery('div#Product').html(insertHtmlShirt);
          //}
        });
      });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="col-lg-9 col-md-9 col-sm-7">
  <div class="container">
    <div class="row">
      <div id="ItemProd" class="col-lg-3 col-md-3 col-sm-6 col-xs-6 mobile">
        <div id="Product"></div>
      </div>
    </div>
  </div>
  <br>
  <br>
</div>

Answer 1

console.log(data.items);
var items = data.items;
var html = "";
for (var i = 0; i < items.length; i++) {
  html += `<div class="card" id="${items[i].id}">
                  <img class="card-img-top" src="${items[i].image}" alt=" "/>
                  <div class="card-body">
                      <h5 class="card-title">${items[i].name}</h5>
                      <p class="card-text">R$ ${items[i].price}</p>
                      <a href="#" class="btn btn-primary">COMPRAR</a>
                  </div>
              </div>`;
} // *** End of loop
jQuery('div#Product').html(html);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="shirts">Click me</div>

<div class="col-lg-9 col-md-9 col-sm-7">
  <div class="container">
    <div class="row">
      <div id="ItemProd" class="col-lg-3 col-md-3 col-sm-6 col-xs-6 mobile">
        <div id="Product"></div>
      </div>
    </div>
  </div>
  <br>
  <br>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Example with the getJSON phony:

// *** Fake items to show
var fakeItems = [
    {
        id: 1,
        image: "https://via.placeholder.com/375/0000FF/808080?text=Shirt+1",
        name: "Shirt 1",
        price: 10
    },
    {
        id: 2,
        image: "https://via.placeholder.com/375/0000FF/808080?text=Shirt+2",
        name: "Shirt 2",
        price: 20
    },
    {
        id: 3,
        image: "https://via.placeholder.com/375/0000FF/808080?text=Shirt+3",
        name: "Shirt 3",
        price: 30
    }
];
// *** Fake version of getJSON
function fakeGetJSON(url, callback) {
    setTimeout(callback, 800, {items: fakeItems});
}
var j = jQuery.noConflict();
j(document).ready(function() {
      // *** The selector in this click handler is invalid, you can't start an ID
      // selector with an unescaped digit (#1)
      //j(document).on("click", "ul#menu li.nav-item#1", function() {
      j(document).on("click", "#shirts", function() {
        fakeGetJSON('/api/V1/categories/1', function(data) {
          console.log(data.items);
          var items = data.items; // *** Let's just call it `items`
          var html = ""; // *** Start with a blank string
          for (var i = 0; i < items.length; i++) {			
              // *** Use += to add to the `html` string
              // *** Note the ${items[i].id} and such
              html += `<div class="card" id="${items[i].id}">
				        <img class="card-img-top" src="${items[i].image}" alt=" "/>
				        <div class="card-body">
				            <h5 class="card-title">${items[i].name}</h5>
				            <p class="card-text">R$ ${items[i].price}</p>
				            <a href="#" class="btn btn-primary">COMPRAR</a>
				        </div>
				    </div>`;
          } // *** End of loop
          jQuery('div#Product').html(html);
        });
      });
}); // *** End the `ready` function call

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="shirts">Click me</div>

<div class="col-lg-9 col-md-9 col-sm-7">
  <div class="container">
    <div class="row">
      <div id="ItemProd" class="col-lg-3 col-md-3 col-sm-6 col-xs-6 mobile">
        <div id="Product"></div>
      </div>
    </div>
  </div>
  <br>
  <br>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>