Как создать таблицу html для отображения массива объектов с не одинаковыми полями? - PullRequest
Новая
       3

Как создать таблицу html для отображения массива объектов с не одинаковыми полями?

1 голос
/ 23 января 2020

У меня есть массив объектов, в которых поля могут немного отличаться.

Когда я строю таблицу из-за того, что у меня нет одинаковых полей в объектах, моя таблица сжимается, как я могу сделать таблица, так что у меня есть пустая строка, где нет полей.

Уважаемые коллеги, подскажите, пожалуйста, как правильно выполнить эту задачу.

вы можете использовать только чистые javascript

const data = [
      {
      "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Died Location": "Munich, Germany",
    "Gender": "male",
    "Prizes": "yes"
    },
      {
        "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Gender": "male",
    "Prizes": "yes"
    },
      {
        "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Died Location": "Munich, Germany",
    "Gender": "male",
    "Prizes": "yes"
    },
      {
        "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Gender": "male",
    "Prizes": "yes"
    },
      {
        "#": 1,
    "First Name": "Wilhelm Conrad",
    "Last Name": "Röntgen",
    "Born Location": "Lennep",
    "Gender": "male",
    "Prizes": "yes"
    }
]

const keys = Object.keys(data[0])

let tab = document.createElement('table');

const buildTableHeader = () => {
    let thead = document.createElement('thead');
    let tr = document.createElement('tr');

    for (const key of keys) {
        const th = document.createElement("th");
        th.appendChild(document.createTextNode(key));
        tr.appendChild(th);
    }
    thead.appendChild(tr)
    tab.appendChild(thead);

    document.body.appendChild(tab)
}

let tb = document.createElement('tbody');

const buildTableBody = () => {
    for (let a of data) {
        let tr = document.createElement('tr');
        for (let key in a) {
            let td = document.createElement('td');
            let tn = document.createTextNode(a[key]);
            td.appendChild(tn);
            tr.appendChild(td);
        }
        tb.appendChild(tr);
    }
    tab.appendChild(tb);
    document.body.appendChild(tab);
}

buildTableHeader()
buildTableBody()

enter image description here

Ответы [ 2 ]

1 голос
/ 23 января 2020

Вы пытаетесь перебрать данные, когда некоторые свойства не существуют. Если вы итерируете свои ключи вместо этого, вы можете проверить, находится ли какой-либо ключ в вашем объекте данных. Если они не просто создают пустой тн. 

const buildTableBody = () => {
    for (let a of data) {
        let tr = document.createElement('tr');
        keys.forEach((key) => {
            let td = document.createElement('td');
            let tn = key in a ? document.createTextNode(a[key]) : document.createTextNode('');
            td.appendChild(tn);
            tr.appendChild(td);
        });
        tb.appendChild(tr);
    }
    tab.appendChild(tb);
    document.body.appendChild(tab);
}
1 голос
/ 23 января 2020 
const buildTableBody = () => {
    for (let a of data) {
        let tr = document.createElement('tr');
        for(let key of keys) {
            let td = document.createElement('td');
            let tn = document.createTextNode(a[key]);
            td.appendChild(tn);
            tr.appendChild(td);
        }
        tb.appendChild(tr);
    }
    tab.appendChild(tb);
    document.body.appendChild(tab);
}

Измените для (введите ключ) на для (введите ключ)

...