如何使用javascript将数组中对象的值插入到html表中

Question

有人可以帮我创建用于循环遍历对象数组和遍历对象值的函数，但仅限于我需要的特定值（id、名字、电子邮件、角色、创建时间、更新时间），而不是全部。并将它们插入到 html 表中

数组：

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

Answer 1

由于某些列不在您的数据中，因此我将您的表格限制为数据中可见的字段。此外，您不需要初始 HTML 表中的空行。

使用insertRow 和insertCell 方法：

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>

Answer 2

innerHTML 解决方案

 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>

Answer 3

您的解决方案是一个简单的循环：

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

Answer 4

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>