Заполнение массива объектов в таблицу

176

17 декабря 2021, 01:10

let names = [ 
  { 
    name: 'Name 1', 
    language: 'ru', 
  }, 
  { 
    name: 'Name 2', 
    language: 'en', 
  } 
]; 
let table = document.querySelector('.tbody'); 
     
valTableName(); 
function valTableName(){ 
  names.forEach(element => { 
    let tr = document.createElement('tr'); 
    table.append(tr); 
 
    let td = document.createElement('td'); 
    tr.append(td); 
    td.append(element); 
  }); 
}

<table> 
    <tbody class="tbody"></tbody> 
</table>

Создавать TR по длине массива, то есть в данном примере 2 tr, а внутри tr 2 td. Чтобы в первом TD было значение name, а во втором TD значение language и так далее по всем TR.

<table> 
  <tr> 
    <td> Name 1 </td> 
    <td> RU </td> 
  </tr> 
  <tr> 
    <td> Name 2 </td> 
    <td> EN </td> 
  </tr> 
</table>

У меня уже голова кругом, я столько всего перепробовал, может я неправильно создал массив с объектами. Покажите правильную дорогу!

Answer 1

let names = [ 
  { 
    name: 'Name 1', 
    language: 'ru', 
  }, 
  { 
    name: 'Name 2', 
    language: 'en', 
  } 
]; 
let table = document.querySelector('.tbody'); 
     
valTableName(); 
function valTableName(){ 
  names.forEach(element => { 
    let tr = document.createElement('tr'); 
    table.append(tr); 
    tr.appendChild(document.createElement('td')).append(element.name); 
    tr.appendChild(document.createElement('td')).append(element.language); 
  }); 
}

td{border:1px solid}

<table> 
    <tbody class="tbody"></tbody> 
</table>

Answer 2

коли у вас в метках jquery, то можно примерно так

let names = [ 
  { 
    name: 'Name 1', 
    language: 'ru', 
  }, 
  { 
    name: 'Name 2', 
    language: 'en', 
  } 
]; 
 
names.forEach(function(obj){ 
   const s = `<tr><td>${obj.name}</td><td>${obj.language}</td></tr>`; 
   $(s).appendTo(".tbody"); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<table> 
    <tbody class="tbody"></tbody> 
</table>

Answer 3

С использованием деструктуризации и стандартных свойств DOM:

let names = [ 
  { name: 'Name 1', language: 'ru' }, 
  { name: 'Name 2', language: 'en' } 
]; 
let table = document.querySelector('.tbody'); 
valTableName(table, names); 
 
function valTableName(tbody, data) { 
  for (const { name, language } of data) { 
    const tr = tbody.insertRow();  
    tr.insertCell().textContent = name;  
    tr.insertCell().textContent = language;  
  } 
}

table { border-collapse: collapse; } 
td { padding: 0.5em 1em; border: 1px solid #ccc; }

<table> 
  <tbody class="tbody"></tbody> 
</table>

При большем количестве свойств в объектах из массива, разумнее будет использование вспомогательного массива ключей (имен свойств) - для сохранения порядка следования ячеек, без дублирования кода. Например:

keys.forEach(k => tr.insertCell().textContent = entry[k]);

Это имеет смысл просто потому, что стандарт не обязывает браузеры сохранять порядок объявления свойств объекта (хоть современные браузеры и делают это, возможны случаи когда вывод например через цикл по Object.values окажется "перемешанным").