How to insert values of objects in array into html table with javascript

user_14796482 0
Viewed 1673

Can someone help me create function for looping through array of objects and looping through objects values but only specific values that i need (id,firstname,email,role,created at,updated at), not all of them. And inserting them into html table

Array:

(2) [{…}, {…}]
0: {_id: "5fd5efc8dfb1d434b84ea1c6", firstName: "ivan", lastName: "ivic", email: "ivan@gmail.com", role: "user", repeatPassword: "password" …}
1: {_id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "pero@gmail.com", role: "user", repeatPassword: "password" …}

length: 2

Table:

<table class="table my-0">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Created At</th>
                        <th>Updated At</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
</table>
object foreach arrays html javascript
4 Answers

As some columns are not in your data, I have limited your table to the fields visible in your data. Also, you don't need the empty row in the initial HTML table.

Use insertRow and insertCell methods:

let data = [
  { _id: "5fd5efc8dfb1d434b84ea1c6", firstName: "ivan", lastName: "ivic", email: "ivan@gmail.com", role: "user" },
  { _id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "pero@gmail.com", role: "user" }
];

let table = document.querySelector(".my-0");
for (let obj of data) {
  let tr = table.insertRow();
  tr.insertCell().textContent = obj._id;
  tr.insertCell().textContent = obj.firstName + " " + obj.lastName;
  tr.insertCell().textContent = obj.email;
  tr.insertCell().textContent = obj.role;
}
table, td, th { border: 1px solid }
table { border-collapse: collapse }
<table class="table my-0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

user_54598390

innerHTML solution

 const ar = [{ _id: "5fd5efc8dfb1d434b84ea1c6", firstName: "ivan", lastName: "ivic", email: "ivan@gmail.com", role: "user", repeatPassword: "password" },
     { _id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "pero@gmail.com", role: "user", repeatPassword: "password" }
 ]
 let result = `<table><thead>
               <tr><th>ID</th><th>Firstname</th><th>E-Mail</th><th>Role</th></tr></thead><tbody>`;
 ar.forEach((elem) => {
     result += `<tr><td>${elem._id}</td><td>${elem.firstName}</td><td>${elem.email}</td><td>${elem.role}</td></td></tr>`

 });
 result += `</tbody></table>`;
 document.getElementById("toIns").innerHTML = result;
 <div id="toIns"> </div>

user_147470390

Your solution is a simple loop:

// Data mock
const users = [
  {_id: "5fd5efc8dfb1d434b84ea1c6", firstName: "ivan", lastName: "ivic", email: "ivan@gmail.com", role: "user", repeatPassword: "password", created_at: "date", updated_at: "date"},
  {_id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "pero@gmail.com", role: "user", repeatPassword: "password", created_at: "date", updated_at: "date"}
];
// End data mock


const tableBody = document.getElementById('table-body');

for (const user of users) {
  const tr = document.createElement('tr');
  const content = `<td>${user._id}</td>
  <td>${user.firstName}</td>
  <td>${user.email}</td>
  <td>${user.role}</td>
  <td>${user.created_at}</td>
  <td>${user.updated_at}</td>`;
  
  tr.innerHTML = content;
  tableBody.appendChild(tr)
 }
<table class="table my-0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
      <th>Created At</th>
      <th>Updated At</th>
    </tr>
  </thead>
  <tbody id="table-body">
  </tbody>
</table>

user_137278680 

let arr = [{_id: "5fd5efc8dfb1d434b84ea1c6", firstName: "ivan", lastName: "ivic", email: "ivan@gmail.com", role: "user", repeatPassword: "password"},
{_id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "pero@gmail.com", role: "Admin", repeatPassword: "password"}]

function addItems(){
   let tbody = document.querySelector('tbody');
   let rows = arr.map(e => {
       let td = document.createElement('tr');
       let id = `<td>${e._id}</td>`
       let first = `<td>${e.firstName}</td>`
       let last = `<td>${e.lastName}</td>`
       let email = `<td>${e.email}</td>`
       let role = `<td>${e.role}</td>`
       //let createdAt = `<td>${e.createdAt}</td>` you still have to add created at field
       td.innerHTML = id+first+last+email+role
       return td
   })
  rows.forEach(n => tbody.append(n))
}

addItems()
<table class="table my-0">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Role</th>
                      </tr>
                    </thead>
                    <tbody>
                      
                    </tbody>
</table>

user_73835200
Related