How to create an html table to display an array of objects with not the same fields?

Question

I have an array of objects in which the fields may differ slightly.

when I build a table due to the fact that I do not have the same fields in objects, my table shrinks how can I make a table so that I have an empty line where there are no fields.

Dear colleagues, please tell me how to correctly complete this task.

you can use only pure 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()

Surendar Vinayagamoorthy · Accepted Answer · 2020-01-23 12:30:11Z

1

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);
}

Change for (let key in a) to for(let key of keys)

answered Jan 23, 2020 at 12:30

Surendar Vinayagamoorthy

921 gold badge1 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

João Pedro R. Carvalho · Accepted Answer · 2020-01-23 12:38:26Z

1

You're trying to iterate data when some properties don't exist. If you iterate your keys instead you can check if whatever key you have is in your data object. If they don't just create an empty tn.

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);
}

answered Jan 23, 2020 at 12:38

João Pedro R. Carvalho

1182 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to create an html table to display an array of objects with not the same fields?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related