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

Posted 2023-03-05

【中文标题】如何使用 JS/JQUERY 从数组创建特定表

【英文标题】：How to create specific table from array using JS/JQUERY

【发布时间】：2021-12-13 18:03:20

【问题描述】：

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

ProjectName	UserName	SpentDays
FirstProject	User1	10
SecondProject	User1	5
SecondProject	User2	3
ThirdProject	NULL	NULL

然后我在数组中的 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 表格：

Projects	User1	User2
FirstProject	10	NULL
SecondProject	5	3
ThirdProject	NULL	NULL

【参考方案1】：

我们需要混合使用 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>

【讨论】：

谢谢，这个解决方案运行良好！ :)

【参考方案2】：

这应该可以解决问题。

别管这个答案，我误读了 OP 想要什么。

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
];

var tbody = $('#mytable tbody');

projectInfo.forEach(e => 
    var row = $("<tr></tr>");
  row.append($("<td></td>").text(e.ProjectName));
  row.append($("<td></td>").text(e.UserName));
  row.append($("<td></td>").text(e.SpentDays));
  tbody.append(row);

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" border=1>
  <thead>
  <tr>
    <th>Projects</th>
    <th>UserName</th>
    <th>SpentDays</th>
  </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>