v2.5.2
Giriş yap

arraydeki verileri div olarak ekrana yazdırma

memdhaci
360 defa görüntülendi
1

objemdeki product bilgilerini alttaki div ile her bir .shop-line a 2 tane .shop-item gelecek şekilde ekranda göstermek istiyorum nasıl yapabilirim?

yani 4 tane productım olduğu için, her birine 2 product gelecek şekilde 2 tane .shop-line oluşacak, ama product sayım 5 veya 6 olursa 3. .shop-line** oluşacak

<div id="shop-items-container">

	<div class="shop-line">
	</div>

</div>

let products = [
  {
    image: 'url',
    name: 'elma',
    price: 15000,
    description: 'yeşil',
  },
  {
    image: 'url',
    name: 'araba',
    price: 150000,
    description: 'beyaz',
  },
  {
    image: 'url',
    name: 'klavye',
    price: 150,
    description: 'siyah',
  },
  {
    image: 'url',
    name: 'telefon',
    price: 150,
    description: 'mor',
  },
];

let div = `
  <div class="shop-item">
    <img class="item-image" src=`$(url)`>

    <div class="top-class">
      <p class="item-name">`$(name)`</p>
      <p class="item-price">`$(price)`</p>
    </div>

    <p class="item-description">`$(description)`</p>
  </div>
`;

umarım anlatabilmişimdir :(

html javascript jquery
Cevap yaz
Cevaplar (1)
makifgokce
897 gün önce
const itemsContainer = document.getElementById('shop-items-container') // container ı seç
let d;
products.forEach(function(x, i){
    if (i % 2 == 0){ // burada arrayin index numarası çift sayı ise | 0, 2, 4, 6 gibi yeni bir div oluşturup class olarakta 'shop-line' atıyoruz
        d = document.createElement('div')
        d.classList.add('shop-line')
    }
    // innerHTML ile veriyi oluşturulan div e ekliyoruz
    d.innerHTML +=  `<div class="shop-item">
                        <img class="item-image" src="${x.image}">
                        <div class="top-class">
                            <p class="item-name">${x.name}</p>
                            <p class="item-price">${x.price}</p>
                        </div>
                        <p class="item-description">${x.description}</p>
                    </div>`;
    if (i % 2 != 0 || i == products.length - 1){ // index numarası tek ise veya arrayin son elemanıysa container içerisine oluşturulan divi ekliyoruz.
        itemsContainer.appendChild(d)
    }
})
1
#008262