Array of object to Table

Project Description:

In this project we are going to create a table from array of objects

There will be data stored in array of oject with which we will create a table dynamically.
There will be seperate array for title of the table.
Table will be created dynamically using createElement() method.

Requirements:

Must be familiar with html table.
You must know How to use and manuplate array of objects: [{},{},{},...]
You must know to manuplate DOM.
You must be familiar with createElement(), and appendChild() methods.

Challenge:

If you want to create table from array of object with the help of description and guidelines above, you can try our Editor above.

Table must look like below in image:

Guides:

Create a html section for table. with its unique id.
Create a array of object with data inside script tag.
Create a array of titles for table.
Create table, rows and columns for each data in array of object using createElement method
Append the dynamically created table in a html section.

If you want to take a challenge don't scroll below

Source code to create table from array of object:

HTML


        <section id="table_container">
    
        </section>

CSS

        #table_container {
            margin:auto;
            padding:0px;
            width:300px;
            height:auto;
           
        }
        table {
            border:3px solid rgb(41, 5, 5);
            margin:10px;
            background-color: rgb(124, 124, 92);
        }
        tr {
            padding:15px 5px;
        }
        th, td {
            padding:10px;
            border:1px solid black;
        }

  
        const Arr=[
        {
            name:'Ram',
            age:18,
            major:'English',
            country:'Nepal',
        },
        
        {
            name:'Akash',
            age:17,
            major:'German',
            country:'India',
        },
        {
            name:'lee',
            age:19,
            major:'Hindi',
            country:'China',
        },
    ];
    const titles=['Name','Age','Major','Country'];
    
    let table_container=document.getElementById("table_container");
    var table=document.createElement('table');
    var headerRow=document.createElement('tr');
    
    titles.forEach(headerText => {
        let header=document.createElement('th');
        let textNode=document.createTextNode(headerText);
        header.appendChild(textNode);
        headerRow.appendChild(header);
    
    });
    table.appendChild(headerRow);
    
    
    Arr.forEach(d=>{
        let row=document.createElement('tr');
        Object.values(d).forEach(text=>{
            let cell=document.createElement('td');
            let textNode=document.createTextNode(text);
            cell.appendChild(textNode);
            row.appendChild(cell);
    
        })
        table.appendChild(row);
    })
    
    table_container.appendChild(table);

PREVIEW: