0

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>

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

2
  • table.innerHTML = names.map( obj => '<tr><td>' + obj.name + '</td><td>' + obj.language + '</td></tr>' ).join(""); - можно еще так, сразу вставить) 7 дек 2019 в 18:53
  • Optimus Вы не успели мне помочь)) Хотя всегда Вы первый на ответе. Хотя Вы же тут не ночуете)
    – hitFM
    7 дек 2019 в 18:55

3 ответа 3

2

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>

1
  • Спасибо и Вам, я уже молился Богу, чтобы найти ответ. Но Боги обитают на stackoverflow !)
    – hitFM
    7 дек 2019 в 18:39
1

коли у вас в метках 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>

1
  • Спасибо огромное, то что нужно!) Реально, сидел очень долго, вроде получалось, но вообще не то, я видимо не по тому пути шёл.
    – hitFM
    7 дек 2019 в 18:35
0

С использованием деструктуризации и стандартных свойств 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 окажется "перемешанным").

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.