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

Question

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>

if you think one of the answers were helpful mark it as accpeted. — Aalexander
– Aalexander, Commented Feb 14, 2021 at 16:14

trincot · Accepted Answer · 2020-12-14 13:25:33Z

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>

Ady · Accepted Answer · 2020-12-14 13:32:46Z

0

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>

answered Dec 14, 2020 at 13:32

Ady

2303 silver badges7 bronze badges

2 Comments

trincot Over a year ago

I tried with { _id: "12<abc", ... }... and it didn't come out right.

Ady Over a year ago

You can replace innerHTML by innerText. The first comes with some characters escaping I guess. Here, the need is with ID without specials characters so I recommend innerHTML. And why an ID should have special characters?

Alan Omar · Accepted Answer · 2020-12-14 13:42:58Z

0

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>

answered Dec 14, 2020 at 13:42

Alan Omar

4,2771 gold badge13 silver badges26 bronze badges

1 Comment

trincot Over a year ago

I tried with { _id: "12<abc", ... }... and it didn't come out right.

Aalexander · Accepted Answer · 2020-12-14 13:57:48Z

0

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>

edited Dec 14, 2020 at 13:57

answered Dec 14, 2020 at 13:25

Aalexander

4,9843 gold badges13 silver badges37 bronze badges

3 Comments

trincot Over a year ago

Have a look at the output... it's not right.

Aalexander Over a year ago

I have updated it, have to concat it. Ty for the advice

Aalexander Over a year ago

thats true ^^ :D

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related