Давление строк и столбцов в таблицу JS

Question

Здорова всем!

Такая проблема - есть файл db.json, где храню 9 ключей, по типу:

[{
    "name": "Air Max 270 Ultramarine",
    "cost": 24400,
    "photo": "nike1.png"
},
{
    "name": "Nike Air Max 270",
    "cost": 24400,
    "photo": "nike2.png"
},
.....] и таких 9 штук в общем;

И вот нужно создать 3 строк по 3 элемента, ну т.е. 3х3 таблицу с такими элементами, где применяются те самые ключи из db.json:

              <td>
                  <div class="products-item">
                    <div class="products-img"><img src="/img/**${photo}**" alt=""></div>
                    <div class="overlay-description">
                      <span class="overlay-text">Повседневная</span>
                      <div class="overlay-btn-group" role="group">
                        <button type="button" class="btn btn-light rounded-pill"><i
                            class="bi bi-cart-plus px-2"></i>Buy</button>
                        <a type="button" class="btn btn-primary rounded-circle"><i class="bi bi-back"></i></a>
                        <a type="button" class="btn btn-primary rounded-circle"><i class="bi bi-heart"></i></a>
                      </div>
                      <span>
                        <h6>**${name}**</h6>
                        <p>**${cost}** ₸</p>
                      </span>
                    </div>
                    <span class="products-type ms-4">
                        <h6>**${name}**</h6>
                        <p>**${cost}** ₸</p>
                    </span>
                  </div>
              </td>

Вот в таком виде хотелось бы выводить:

<tbody class="table-body-items">
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
</tbody>

Как это реализовать с помощью чистого JS?

Answer 1

Над оформлением не заморачивался

let body = document.querySelector('body');
let tbody = document.createElement('tbody');
tbody.className = "table-body-items";
let datajson = [{"name":"Air Max 270 Ultramarine","cost":24400,"photo":"nike1.png"},{"name":"Nike Air Max 270","cost":24400,"photo":"nike2.png"},{"name":"Air Max 270 Ultramarine","cost":24400,"photo":"nike1.png"},{"name":"Nike Air Max 270","cost":24400,"photo":"nike2.png"}];
datajson.forEach((obj)=>{
   let newTr = document.createElement('tr');
    for (const key in obj) {
        let newTd = document.createElement('Td');
        newTd.innerText = `${obj[key]}`;
        newTr.append(newTd);
    }
    tbody.append(newTr);
});
body.append(tbody);

Answer 2

const data = [{
    "name": "Air Max 270 Ultramarine",
    "cost": 24400,
    "photo": "nike1.png"
},
{
    "name": "Nike Air Max 270",
    "cost": 24400,
    "photo": "nike2.png"
},
{
    "name": "Nike Air Max 270",
    "cost": 24400,
    "photo": "nike2.png"
},
{
    "name": "Air Max 270 Ultramarine",
    "cost": 24400,
    "photo": "nike1.png"
},
{
    "name": "Nike Air Max 270",
    "cost": 24400,
    "photo": "nike2.png"
},
{
    "name": "Nike Air Max 270",
    "cost": 24400,
    "photo": "nike2.png"
},{
    "name": "Air Max 270 Ultramarine",
    "cost": 24400,
    "photo": "nike1.png"
},
{
    "name": "Nike Air Max 270",
    "cost": 24400,
    "photo": "nike2.png"
},
{
    "name": "Nike Air Max 270",
    "cost": 24400,
    "photo": "nike2.png"
}];

const table = document.querySelector('.table-body-items');
let row = table.insertRow();

data.forEach((item, index) =>
{
  if (index != 0 && index % 3 == 0)
  {
    row = table.insertRow();
  }
  
  const cell = row.insertCell();
  cell.innerHTML = `
            <td>
              <div class="products-item">
                <div class="products-img"><img src="/img/${item.photo}" alt=""></div>
                <div class="overlay-description">
                  <span class="overlay-text">Повседневная</span>
                  <div class="overlay-btn-group" role="group">
                    <button type="button" class="btn btn-light rounded-pill"><i
                        class="bi bi-cart-plus px-2"></i>Buy</button>
                    <a type="button" class="btn btn-primary rounded-circle"><i class="bi bi-back"></i></a>
                    <a type="button" class="btn btn-primary rounded-circle"><i class="bi bi-heart"></i></a>
                  </div>
                  <span>
                    <h6>${item.name}</h6>
                    <p>${item.cost} ₸</p>
                  </span>
                </div>
                <span class="products-type ms-4">
                    <h6>${item.name}</h6>
                    <p>${item.cost} ₸</p>
                </span>
              </div>
          </td>`;
});

<table>
  <tbody class="table-body-items"></tbody>
</table>

БЛОГ НА HUSL

Давление строк и столбцов в таблицу JS

Ответы (2 шт):