时间戳

首页 > 解决方案 > 如何使用 JS/JQUERY 从数组创建特定表

javascript - 如何使用 JS/JQUERY 从数组创建特定表

问题描述

我正在做一些项目，我坚持了一段时间。我在数据库中有这样的表：

项目名称 用户名 花费天数
第一个项目 用户 1 10
第二个项目 用户 1 5
第二个项目 用户 2 3
第三个项目 无效的 无效的

然后我在数组中的 js 中获取这些信息，如下所示：

ProjectInfo = [{
  ProjectName: 'FirstProject',
  UserName: 'User1',
  SpentDays: 10
}, {
  ProjectName: 'SecondProject',
  UserName: 'User1',
  SpentDays: 5
}, {
  ProjectName: 'SecondProject',
  UserName: 'User2',
  SpentDays: 3
}, {
  ProjectName: 'ThirdProject',
  UserName: NULL,
  SpentDays: NULL
}]

如何使用 JS/JQUERY 获得这样的 HTML 表：

项目 用户 1 用户 2
第一个项目 10 无效的
第二个项目 5 3
第三个项目 无效的 无效的

标签： javascriptjqueryarrayshtml-table

解决方案

我们需要混合使用 reduce 和 map 以及模板文字

const NULL = null; // or you use null in the object
ProjectInfo = [{
  ProjectName: 'FirstProject',
  UserName: 'User1',
  SpentDays: 10
}, {
  ProjectName: 'SecondProject',
  UserName: 'User1',
  SpentDays: 5
}, {
  ProjectName: 'SecondProject',
  UserName: 'User2',
  SpentDays: 3
}, {
  ProjectName: 'ThirdProject',
  UserName: NULL,
  SpentDays: NULL
}]

const users = [...new Set(ProjectInfo.map(({ UserName }) => UserName))].filter(user => user != NULL); // create a list of users
document.querySelector("table thead tr").innerHTML += users.map(user => `<th>${user}</th>`).join(""); // add them to the table head

// create a default object
const obj = JSON.stringify(users.reduce((acc, user) => {
  acc[user] = "NULL";
  return acc
}, {}));

// reduce to something more manageable 
const rows = ProjectInfo.reduce((acc, cur) => {
  acc[cur.ProjectName] = acc[cur.ProjectName] || JSON.parse(obj)
  if (cur.UserName !== null) acc[cur.ProjectName][cur.UserName] = cur.SpentDays
  return acc
}, {});

document.querySelector("table tbody").innerHTML = Object
  .entries(rows)
  .map(([name,project]) => `<tr><td>${name}</td>${Object
    .values(project)
    .map(val => `<td>${val}</td>`)
    .join("")}</tr>`)
  .join("");
<link rel="stylesheet" href="https://cdn.sstatic.net/Shared/stacks.css" />
<table class="s-table">
  <thead>
    <tr>
      <th>Projects</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

推荐阅读