@Scriptoo

Как сделать цикл, который выводит весь массив объектов в формате html-таблицы?

У меня есть массив, которому я присвоил 3 объекта у которых некоторые свойства разные.
let a = {
    name: "Alexander",
    surname: "Pushkin",
    fathername: "Sergeevich",
}
let b = {
    name: "Taras",
    surname: "Shevchenko",
    sex: "male"
}
let c = {
    name: "Nicolay",
    surname: "Gogol",
    age: 25,
}    

let persons = [a, b, c]

Я сделал такую таблицу
607ef37d7fc0e292097942.jpeg
Вот код:
let str2 = "<table border='1'>"
str2 += "<tr><th>Person</th><th>name</th><th>surname</th><th>age</th><th>fathername</th><th>sex</th></tr>"
for(let i = 0; i < persons.length; i++){
    if(i % 2 == 1){
        str2 += `<tr><td>${i}</td>
        <td>${persons[i]["name"]}</td>
        <td>${persons[i]["surname"]}</td>
        <td>${persons[i]["age"]}</td>
        <td>${persons[i]["fathername"]}</td>
        <td>${persons[i]["sex"]}</td></tr>`
    }
    else{
        str2 += `<tr style='background: cyan'><td>${i}</td>
        <td>${persons[i]["name"]}</td>
        <td>${persons[i]["surname"]}</td>
        <td>${persons[i]["age"]}</td>
        <td>${persons[i]["fathername"]}</td>
        <td>${persons[i]["sex"]}</td></tr>`
    }
}
str2
str2 += "</table>"
document.write(str2)

Но как сделать, чтобы не нужно было вручную вводить шапку таблицы, а написать цикл, чтобы шапка и другие строки выводились сами?
  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
twobomb
@twobomb
let headers = persons.reduce((a,b)=>a.concat(Object.keys(b)),[]).filter((v, i, s)=>s.indexOf(v) === i);
str = `<table border='1'><tr>${headers.map(e=>`<th>${e}</th>`).join("\n")}</tr>` + persons.map(e=>`<tr>${headers.map(e1=>`<td>${e[e1]?e[e1]:"-"}</td>`).join("\n")}</tr>`).join("\n")+`</table>`;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
const columns = [ 'name', 'surname', 'age', 'fathername', 'sex' ];

document.body.insertAdjacentHTML('beforeend', `
  <table>
    <thead>
      <tr>
        <th>#</th>
        ${columns.map(col => `<th>${col}</th>`).join('')}
      </tr>
    </thead>
    <tbody>${persons.map((person, i) => `
      <tr>
        <th>${i}</th>
        ${columns.map(col => `<td>${person[col]}</td>`).join('')}
      </tr>`).join('')}
    </tbody>
  </table>
`);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы