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 окажется "перемешанным").

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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