create table from jsp in javascript

Question

I have the following table with the columns shown in the code below (in jsp).

I want this same table to be done in javascript, where list in my case will be a json array of objects.

Can you kindly help me with this?

<table border="1" width="90%">  
<tr>
<th>Id</th>
<th>Name</th>
<th>Password</th>
<th>Email</th>  
<th>Sex</th>
<th>Country</th>
<th>Edit</th>
<th>Delete</th></tr>  
<c:forEach items="${list}" var="u">  
<tr><td>${u.getId()}</td>
<td>${u.getName()}</td>
<td>${u.getPassword()}</td>  
<td>${u.getEmail()}</td>
<td>${u.getSex()}</td>
<td>${u.getCountry()}</td>  
<td><a href="editform.jsp?id=${u.getId()}">Edit</a></td>  
<td><a href="deleteuser.jsp?id=${u.getId()}">Delete</a></td></tr>  
</c:forEach>  
</table>

Answer 1

Here is one approach, demoing with a smaller set of fields.

It is not entirely clear what the links for Edit/Delete are supposed to be. Here, we leave it as a link to a JSP.

let table = document.createElement('TABLE');
let header = document.createElement('TR');
 
let fields = [ 'Id', 'Name', 'Password', 'Edit' ];

let cell;
for (var i=0; i<fields.length; i++) {
    cell = document.createElement('TH');
    cell.innerHTML = fields[i]; 
    header.appendChild(cell);
}
table.appendChild(header);

let data = [
    { 
        'Id': 'someId', 
        'Name': 'some name', 
        'Password': 'some encrypted password',
        'Edit': "<a href='editform.jsp?id=someId'>Edit</a>"
    }, 
    { 
        'Id': 'anotherId', 
        'Name': 'some other name', 
        'Password': 'some other encrypted password',
        'Edit': "<a href='editform.jsp?id=anotherId'>Edit</a>"
    }
];

let rowData;
let fieldName;
for (i=0 ; i<data.length ; i++) { 
    let row = document.createElement('TR');
    rowData = data[i];
    for (var j=0; j<fields.length; j++) {
        fieldName = fields[j];
        cell = document.createElement('TD');
        cell.innerHTML = rowData[fieldName];
        row.appendChild(cell);
    }
    table.appendChild(row);
}

let body = document.querySelector('BODY');
body.appendChild(table);