What is the best way to convert an HTML table into an array of objects?

Question

What is the best way to convert an HTML table into an array of objects?

In my Angular Protractor end-to-end (e2e) tests, I need to perform assertions on an HTML fragment similar to the following:

<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>

Is there a way to transform this into a JavaScript object in the following format?

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

I attempted the following approach, however, it only returns a 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();
});

javascript angular typescript protractor end-to-end

Answer 1

Answer №1

To tailor it to your specific situation, you have the option to transform the HTML content into a straightforward array of objects that align with your requirements:

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

For a more concise code snippet, you could streamline it by substituting for loops with array methods. However, in its current form, it may be easier to comprehend.

Answer 2

To tailor it to your specific situation, you have the option to transform the HTML content into a straightforward array of objects that align with your requirements:

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

For a more concise code snippet, you could streamline it by substituting for loops with array methods. However, in its current form, it may be easier to comprehend.

What is the best way to convert an HTML table into an array of objects?

Answer №1

Similar questions

Sequelize makes it easy to input records into various tables simultaneously

Switching over from create-react-app to NextJS, encountering difficulties with integrating ThreeJS

observe the file currently residing on the server

Is it possible for Cypress to execute test files that are imported from outside of the Cypress folder

Separating the login/register functionality from the main app using the MEAN Stack

What is the best way to ensure a jQuery function runs on duplicated elements?

Tips for accessing form data that has been automatically uploaded in PHP

Is it possible for a memory leak to occur when a jQuery object is created within a function but never actually used?

JavaScript HTML content manipulation

Utilizing database information for interactive objects in Three.js: A step-by-step guide

Reorganizing array sequence within a sortable list

Using TypeScript to automatically determine the argument type of a function by analyzing the return type of a different function

Error: Uncaught promise rejection - The function is undefined in the context of Vue.js and Electron

Handling Removal of Selected Option in React Material-UI Autocomplete Single Selection

Vue and Jexcel: maximizing efficiency with event handling and dynamic calculations

Guidelines for utilizing a loader to handle a TypeScript-based npm module

Implement a click event using jQuery specifically for Internet Explorer version 7

What is the best way to incorporate Javascript into jQuery tabs?

Having trouble importing from the src folder in Expo React

Attaching a buoyant div to the precise location of a different element