CODEWITHSUNDEEP
javascripthtmlarraysobjectforeach
vturkovic
vturkovic

Reputation: 137

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

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: "[email protected]", role: "user", repeatPassword: "password" …}
1: {_id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "[email protected]", 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>

Upvotes: 2

Views: 3079

Answers (4)

Aalexander
Aalexander

Reputation: 5004

innerHTML solution

 const ar = [{ _id: "5fd5efc8dfb1d434b84ea1c6", firstName: "ivan", lastName: "ivic", email: "[email protected]", role: "user", repeatPassword: "password" },
     { _id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "[email protected]", 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>

Upvotes: 0

Alan Omar
Alan Omar

Reputation: 4217

let arr = [{_id: "5fd5efc8dfb1d434b84ea1c6", firstName: "ivan", lastName: "ivic", email: "[email protected]", role: "user", repeatPassword: "password"},
{_id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "[email protected]", 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>

Upvotes: 0

Ady
Ady

Reputation: 220

Your solution is a simple loop:

// Data mock
const users = [
  {_id: "5fd5efc8dfb1d434b84ea1c6", firstName: "ivan", lastName: "ivic", email: "[email protected]", role: "user", repeatPassword: "password", created_at: "date", updated_at: "date"},
  {_id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "[email protected]", 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>

Upvotes: 0

trincot
trincot

Reputation: 350272

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: "[email protected]", role: "user" },
  { _id: "5fd74b0562af8926f44b1cfd", firstName: "pero", lastName: "peric", email: "[email protected]", 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>

Upvotes: 1

Related Questions