How to Create an HTML Table from an Object Array Using JavaScript ? - Coding

Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays.

Table of Content

Using innerHTML property
Using appendChild() method

Using innerHTML property

The innerHTML property allows us to set or get the HTML content within an element. This method is concise and straightforward for creating tables.

Syntax:

selectedElement.innerHTML = "value";

Example: The below code implements the innerHTML property to create an HTML table using a JavaScript array.

HTML

<!DOCTYPE html>
<html lang="en">
 
<body>
    <script>
        const data = [
            { name: 'Rahul', age: 25, city: 'New Delhi' },
            { name: 'Vijay', age: 30, city: 'Muzaffarpur' },
            { name: 'Gaurav', age: 22, city: 'Noida' },
        ];
 
        function createTableWithInnerHTML() {
            let tableHTML = '<table border="1"><tr>';
 
            Object.keys(data[0]).forEach(key => {
                tableHTML += `<th>${key}</th>`;
            });
 
            tableHTML += '</tr>';
 
            data.forEach(item => {
                tableHTML += '<tr>';
                Object.values(item).forEach(value => {
                    tableHTML += `<td>${value}</td>`;
                });
                tableHTML += '</tr>';
            });
 
            tableHTML += '</table>';
 
            document.body.innerHTML += tableHTML;
        }
 
        createTableWithInnerHTML();
    </script>
</body>
 
</html>

Output:

tableOP

Using appendChild() method

The appendChild() method can be used to dynamically append the created HTML to a selected DOM element by passing the HTML as parameter to it. It appends HTML as child of the selected element.

Syntax:

selectedElement.appendChild('HTMLToAppend');

Example: The below code implements the appendChild() method to dynamically create a HTML table from JavaScript object.

HTML

<!DOCTYPE html>
<html lang="en">
 
<body>
    <script>
        const data = [
            { name: 'Rahul', age: 25, city: 'New Delhi' },
            { name: 'Vijay', age: 30, city: 'Muzaffarpur' },
            { name: 'Gaurav', age: 22, city: 'Noida' },
        ];
 
        function createTableWithForEach() {
            const table = document.createElement('table');
            table.setAttribute('border', '1');
 
            const headerRow = document.createElement('tr');
            Object.keys(data[0]).forEach(key => {
                const th = document.createElement('th');
                th.appendChild(document.createTextNode(key));
                headerRow.appendChild(th);
            });
            table.appendChild(headerRow);
 
            data.forEach(item => {
                const row = document.createElement('tr');
                Object.values(item).forEach(value => {
                    const td = document.createElement('td');
                    td.appendChild(document.createTextNode(value));
                    row.appendChild(td);
                });
                table.appendChild(row);
            });
 
            document.body.appendChild(table);
        }
 
        createTableWithForEach();
    </script>
</body>
 
</html>

Output:

tableOP

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Hydrogen Sulphide \| Structure, Formula, Properties & Uses
How to configure Digest Authentication in Postman?
CSS-in-JS Next JS
Measurement: Definition, Types, Scale, and Conversion Table
Square Root of 13 \| How to Find Value of Root 13?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13