Как вывести данные массива в таблицу?

Question

[Andrej Sharapov]

Привет всем. Собственно вот, застрял.



Нужно подставить данные из массива в соответствующие поля. Подскажите, как реализовать?

Comments

[Cr2ed]

тык

[Andrej Sharapov]

Cr2ed, спасибо)

Answer 1

[Ihor Bratukh]

Или такой вариант для более гибкой работы с шаблоном

<table>
  <thead>
    <th>id</th>
    <th>name</th>
    <th>last</th>
    <th>comment</th>
  </thead>
  <tbody id="container"></tbody>
</table>

const array = [{
    id: "Uno",
    name: "First point",
    last: "Last",
    com: "Comment one"
},
{
    id: "Dos",
    name: "Two point",
    last: "Last",
    com: "Comment Two"
},
{
    id: "Tres",
    name: "Three point",
    last: "Last",
    com: "Comment Three"
},
{
    id: "Cuatro",
    name: "Four point",
    last: "Last",
    com: "Comment Four"
}];

document.getElementById('container').innerHTML = tableInner(array);

function tableInner(data) {
    let html = '';
    data.forEach(item => (html += templateTableRow(item)));
    return html;
}

function templateTableRow(data) {
    return `
        <tr>
            <td>${data.id}</td>
            <td>${data.name}</td>
            <td>${data.last}</td>
            <td>${data.com}</td>
        </tr>
    `;
}

Answer 2

[Вероника]

Про работу с DOM javascript.ru/tutorial/dom/modify

let i,
    arrayItem,
    rows = arr.length,
    tableBody = document.querySelector('.tbody');

for (i = 0; i < rows; i++) {
    arrayItem = arr[i];
    tableBody.innerHTML += `<tr><td>${arrayItem.id}</td><td>${arrayItem.name}</td><td>${arrayItem.last}</td><td>${arrayItem.com}</td></tr>`;
}

Это по быстрому. Лучше создать отдельный шаблон для строки, особенно если там ещё классы будут, потом вызывать функцию добавления данных в шаблон. Например:

function createImageCardTemplate(image) {
  let imageTemplate = document.createElement("div");
  imageTemplate.classList.add(`${USER_GALLERY_CLASS}__item`, "js-show-image");
  imageTemplate.setAttribute("data-target-image", image.id);
  imageTemplate.innerHTML =
        `<img class="${USER_GALLERY_CLASS}__image" src="${image.filePath}" alt="${image.fileName}">`;

  return imageTemplate;
}

function renderGallery(images) {
  let imagesCount = images.length,
      $image,
      imageData,
      i;

  $gallery.addEventListener("click", bindImageCardClick);

  if (!imagesCount) {
    $gallery.innerText = "No images found";
    return;
  }
  $gallery.innerText = "";

  for (i = 0; i < imagesCount; i++) {
    imageData = images[i];
    $image = createImageCardTemplate(imageData);
    $gallery.appendChild($image);
  }
}

Answer 3

[winbackgo]

const tbody = document.querySelector('.table tbody')
  
  for (let i = 0, len = arr.length; i < len; i++) {
    const tr = tbody.insertRow()
    Object.keys(arr[i]).map(key => tr.insertCell().appendChild(document.createTextNode(arr[i][key])))
  }

Использовать те что есть:

const tbody = document.querySelector('.table tbody')
  
  for (let i = 0, len = arr.length; i < len; i++) {
    const tr = tbody.rows[i]
    Object.keys(arr[i]).map((key, index) => tr.cells[index].appendChild(document.createTextNode(arr[i][key])))
  }

Comments

[dante9518]

А что если написать
for(let i = 0; i < arr.length; i++){....}

Не создавая переменную len. Какой в этом толк? Не для стеба, а реально не понимаю)