How to read an html table into an array of objects?

Question

In my angular protractor e2e tests, I want to do assertions on a html fragment like this:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Joe</td>
            <td>23</td>
            <td>M</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>26</td>
            <td>W</td>
        </tr>
        ...
    </tbody>
</table>

How can I convert that into a JavaScript object like this?

[
    {Name: 'Joe', Age: 23, Gender: 'M'},
    {Name: 'Mary', Age: 25, Gender: 'W'},
    ...
]

I tried this, but it gives me one dimensional array:

const row = element.all(by.css('tr'));
const cells = row.all(by.tagName('td'));
return cells.map(function (elm) {
  return elm.getText();
});

stackoverflow.com/questions/29501976/… seems not to work for me, because I did not create the table using ng-repeater. — slartidan
– slartidan, Commented Mar 2, 2018 at 12:34
you don't need a repeater for that, you can get lists of elements based on other selectors too.. — toskv
– toskv, Commented Mar 2, 2018 at 12:52
what you had is correct, you just need to create objects instead of just mapping on the columns — toskv
– toskv, Commented Mar 2, 2018 at 12:53

Fenton · Accepted Answer · 2018-03-02 12:54:02Z

3

For your specific example, you can convert the HTML into a simple array of objects that match your needs:

function isHTMLTableElement(elem: HTMLTableElement | HTMLElement) : elem is HTMLTableElement {
    return elem.tagName === 'TABLE';
}

const table = document.getElementById('test');
const result: {name: string, age: number, gender: string}[] = [];

if (isHTMLTableElement(table)) {
    const rows: HTMLElement[] = [].slice.call(table.querySelectorAll('tbody tr'));
    for (const row of rows) {
        const cells: HTMLElement[] = [].slice.call(row.querySelectorAll('td'));
        const [name, age, gender] = cells.map(c => c.innerText);
        result.push({
            name: name,
            age: +age,
            gender: gender
        });
    }

    console.log(JSON.stringify(result));
}

You could collapse this further by replacing for loops with array methods, but I left it like this as it is probably more understandable.

answered Mar 2, 2018 at 12:54

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

4 Comments

slartidan Over a year ago

Thanks a lot! However, currently protractor complains: Failed: document is not defined

slartidan Over a year ago

If possible, I would prefer a solution, that uses the th elements to produce the names. However, I can give it a try to figure it out by myself. The type safety (age as number) is not a priority for me.

Fenton Over a year ago

You can do a similar trick on the thead > tr > th elements to get the names.

Rohit Borude Over a year ago

Indeed it helped me, But How can we make it dynamic, like the name,age,gender etc. columns should come dynamically

Collectives™ on Stack Overflow

How to read an html table into an array of objects?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related