CODEWITHSUNDEEP
javascript
a_l_e_x
a_l_e_x

Reputation: 400

create table from jsp in javascript

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>

Upvotes: 0

Views: 99

Answers (2)

Elaine Alt
Elaine Alt

Reputation: 56

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

Upvotes: 0

Endunry
Endunry

Reputation: 974

The most simplest thing you can try is something like that (if i understood you correctly):

let table = document.getElementById("my-table");

let list = [{
  "id":1,
  "name":"Jhon",
  "password":"doejhon@",
  "email":"[email protected]",
  "sex":"male",
  "country":"USA"
},
{
  "id":2,
  "name":"Lisa",
  "password":"w87e8c8787%",
  "email":"[email protected]",
  "sex":"female",
  "country":"UK"
}];

list.forEach(item=>{
  let child = document.createElement("tr");
  child.innerHTML = `<td>${item.id}</td><td>${item.name}</td><td>${item.password}</td><td>${item.email}</td><td>${item.sex}</td><td>${item.country}</td><td>-</td><td>-</td>`;
  table.appendChild(child);
})
<table border="1" width="90%" id="my-table">  
<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>  

</table>

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

Upvotes: 1

Related Questions