javascript - 将时间戳列表排序到另一个列表
问题描述
我正在从服务器获取时间戳列表。
如何按日期对它们进行排序并使用 JavaScript 按日期将列表重新组合为新列表。
问题是，我不确定服务器会到达多少个不同的日期。
我想在 HTML 表格中为每个日期创建一个新行
我得到的数据和我尝试过的
"timeActivities": [{
"start": "2021-06-01T06:00:41.928+00:00",
"end": "2021-06-01T15:00:41.928+00:00",
"activityType": "Work"
},
{
"start": "2021-06-02T06:00:32.928+00:00",
"end": "2021-06-02T15:00:15.928+00:00",
"activityType": "Work"
},
{
"start": "2021-06-03T06:00:16.928+00:00",
"end": "2021-06-03T15:00:12.928+00:00",
"activityType": "Work"
},
{
"start": "2021-06-04T06:00:01.928+00:00",
"end": "2021-06-04T15:00:02.928+00:00",
"activityType": "Work"
},
{
"start": "2021-06-05T06:00:03.928+00:00",
"end": "2021-06-05T15:00:00.928+00:00",
"activityType": "Work"
}
]
function addTimeToWorkHourTable(datesArr) {
//Clears the table head
$("#tblWorkedHours tr").empty();
$("#tblTimeSchedule tbody").empty();
var rowCounter = 0;
var columnCounter = 0;
var tempArr = []
//Counts rows and Colums, was needed in a later version
for (var i = 0; i < datesArr.length; i++) {
if (i + 1 != datesArr.length) {
tempArr.push(datesArr[i + 1])
var tempDate1 = new Date(datesArr[i]['start'])
var tempDate2 = new Date(tempArr[i]['start'])
} else {
tempArr.push(datesArr[0])
var tempDate1 = new Date(datesArr[i]['start'])
var tempDate2 = new Date(tempArr[0]['start'])
}
if (tempDate1.getDate() != tempDate2.getDate()) {
rowCounter++;
} else {
columnCounter++;
}
}
//Creating a checkDate to find different dates
var checkDate = new Date(datesArr[0]['start'])
var firstColumn = true;
var columnEnd = false;
var oneDay = 60 * 60 * 1000;
var hoursWorkedPerDay = 0;
if (sessionStorage.getItem("employmentType") === "FULLTIME") {
var targetWorkHoursPerDay = 8;
} else {
var targetWorkHoursPerDay = 4;
}
var difference;
var tempHourStart
var tempHourEnd
for (var i = 0; i < datesArr.length; i++) {
var tempDate = new Date(datesArr[i]['start'])
if (checkDate.getDate() === tempDate.getDate() && i + 1 != datesArr.length) {
if (firstColumn) {
var newRow = "<tr>";
var newRowSchedule = "<tr>";
newRow += "<td>" + "<i class=\"fa fa-fw fa-calendar\"></i>" + dateFormmater(tempDate) + "</td>";
newRowSchedule += "<td>" + "<i class=\"fa fa-fw fa-calendar\"></i>" + dateFormmater(tempDate) + "</td>";
if (firstDateOfDay != null) {
newRow += "<td>" + "<i class=\"fa fa-fw fa-play-circle\"style=\"color: #00FF00;\"></i>" + firstDateOfDay.getHours() + ":" + firstDateOfDay.getMinutes() + ":" + firstDateOfDay.getSeconds() + "</td>";
newRow += "<td>" + "<i class=\"fa fa-fw fa-stop-circle\" style=\"color: #FF0000;\"></i>" + firstDateOfDay.getHours() + ":" + firstDateOfDay.getMinutes() + ":" + firstDateOfDay.getSeconds() + "</td>";
}
firstDateOfDay = null;
firstColumn = false;
}
tempHourStart = new Date(datesArr[i]['start']);
tempHourEnd = new Date(datesArr[i]['end']);
hoursWorkedPerDay += Math.abs((tempHourEnd.getTime() - tempHourStart.getTime()) / (oneDay));
newRow += "<td>" + "<i class=\"fa fa-fw fa-play-circle\"style=\"color: #00FF00;\"></i>" + tempHourStart.getHours() + ":" + tempHourStart.getMinutes() + ":" + tempHourStart.getSeconds() + "</td>";
newRow += "<td>" + "<i class=\"fa fa-fw fa-stop-circle\" style=\"color: #FF0000;\"></i>" + tempHourEnd.getHours() + ":" + tempHourEnd.getMinutes() + ":" + tempHourEnd.getSeconds() + "</td>";
//When the Date changes, we add the Row to the table
} else if (checkDate.getDate() != tempDate.getDate()) {
columnEnd = true;
if (columnEnd) {
difference = (hoursWorkedPerDay - targetWorkHoursPerDay);
newRowSchedule += "<td>" + "<i class=\"fa fa-fw fa-history\"></i>" + convertNumToTime(hoursWorkedPerDay) + "</td>";
newRowSchedule += "<td>" + "<i class=\"fa fa-fw fa-bullseye\"></i>" + convertNumToTime(targetWorkHoursPerDay) + "</td>";
if (difference < 0) {
newRowSchedule += "<td style=\"background-color:#FF0000;\">" + convertNumToTime(difference) + "</td>";
} else {
newRowSchedule += "<td style=\"background-color:#00FF00;\">" + convertNumToTime(difference) + "</td>";
}
newRow += "</tr>";
$("#tblWorkedHours tbody").append(newRow);
$("#tblTimeSchedule tbody").append(newRowSchedule);
var firstDateOfDay = tempDate;
checkDate = tempDate;
firstColumn = true;
columnEnd = false;
}
}
//We use this if the last 2 dates are the same
if (checkDate.getDate() === tempDate.getDate() && i + 1 === datesArr.length) {
tempHourStart = new Date(datesArr[i]['start']);
tempHourEnd = new Date(datesArr[i]['end']);
//TODO Fix this bullshit MF
if (firstColumn) {
var newRow = "<tr>";
var newRowSchedule = "<tr>";
newRow += "<td>" + "<i class=\"fa fa-fw fa-calendar\"></i>" + dateFormmater(tempDate) + "</td>";
newRowSchedule += "<td>" + "<i class=\"fa fa-fw fa-calendar\"></i>" + dateFormmater(tempDate) + "</td>";
firstColumn = false;
}
hoursWorkedPerDay += Math.abs((tempHourEnd.getTime() - tempHourStart.getTime()) / (oneDay));
newRow += "<td>" + "<i class=\"fa fa-fw fa-play-circle\"style=\"color: #00FF00;\"></i>" + tempHourStart.getHours() + ":" + tempHourStart.getMinutes() + ":" + tempHourStart.getSeconds() + "</td>";
newRow += "<td>" + "<i class=\"fa fa-fw fa-stop-circle\" style=\"color: #FF0000;\"></i>" + tempHourEnd.getHours() + ":" + tempHourEnd.getMinutes() + ":" + tempHourEnd.getSeconds() + "</td>";
columnEnd = true;
if (columnEnd) {
difference = (hoursWorkedPerDay - targetWorkHoursPerDay);
newRowSchedule += "<td>" + "<i class=\"fa fa-fw fa-history\"></i>" + convertNumToTime(hoursWorkedPerDay) + "</td>";
newRowSchedule += "<td>" + "<i class=\"fa fa-fw fa-bullseye\"></i>" + convertNumToTime(targetWorkHoursPerDay) + "</td>";
if (difference < 0) {
newRowSchedule += "<td style=\"background-color:#FF0000;\">" + convertNumToTime(difference) + "</td>";
} else {
newRowSchedule += "<td style=\"background-color:#00FF00;\">" + convertNumToTime(difference) + "</td>";
}
newRow += "</tr>";
$("#tblWorkedHours tbody").append(newRow);
$("#tblTimeSchedule tbody").append(newRowSchedule);
checkDate = tempDate;
firstColumn = true;
columnEnd = false;
}
}
//We Check if the last date is uniqe on its own
//if so we add a new row
if (checkDate.getDate() != tempDate.getDate() && (i + 1) === datesArr.length) {
tempHourStart = new Date(datesArr[i]['start']);
tempHourEnd = new Date(datesArr[i]['end']);
firstColumn = true;
if (firstColumn) {
var newRow = "<tr>";
var newRowSchedule = "<tr>";
newRow += "<td>" + "<i class=\"fa fa-fw fa-calendar\"></i>" + dateFormmater(tempDate) + "</td>";
newRowSchedule += "<td>" + "<i class=\"fa fa-fw fa-calendar\"></i>" + dateFormmater(tempDate) + "</td>";
firstColumn = false;
}
hoursWorkedPerDay += Math.abs((tempHourEnd.getTime() - tempHourStart.getTime()) / (oneDay));
newRow += "<td>" + "<i class=\"fa fa-fw fa-play-circle\"style=\"color: #00FF00;\"></i>" + tempHourStart.getHours() + ":" + tempHourStart.getMinutes() + ":" + tempHourStart.getSeconds() + "</td>";
newRow += "<td>" + "<i class=\"fa fa-fw fa-stop-circle\" style=\"color: #FF0000;\"></i>" + tempHourEnd.getHours() + ":" + tempHourEnd.getMinutes() + ":" + tempHourEnd.getSeconds() + "</td>";
columnEnd = true;
if (columnEnd) {
difference = (hoursWorkedPerDay - targetWorkHoursPerDay);
newRowSchedule += "<td>" + hoursWorkedPerDay + "</td>";
newRowSchedule += "<td>" + "<i class=\"fa fa-fw fa-bullseye\"></i>" + convertNumToTime(targetWorkHoursPerDay) + "</td>";
if (difference < 0) {
newRowSchedule += "<td style=\"background-color:#FF0000;\">" + convertNumToTime(difference) + "</td>";
} else {
newRowSchedule += "<td style=\"background-color:#00FF00;\">" + convertNumToTime(difference) + "</td>";
}
newRow += "</tr>";
$("#tblWorkedHours tbody").append(newRow);
$("#tblTimeSchedule tbody").append(newRowSchedule);
checkDate = tempDate;
firstColumn = true;
columnEnd = false;
}
}
}
}解决方案
您可以在 lodash 中尝试使用 _.groupBy
推荐阅读
- javascript - 在 url 中并通过前端传递值并在 angularjs 中捕获后端
- node.js - 如何制作邀请命令（Discord.js）
- visual-studio-2017 - 每当我尝试安装某个 Discord 包时，就会弹出依赖注入错误
- apache-kafka - Linux生产者到Windows消费者未能解决
- prolog - SWI Prolog 为列表列表中的所有变量提供特定值
- javascript - 使用反应从animationFrame内部访问状态数组的问题
- javascript - 关于如何使用闭包/组合最好地解决三个难题的建议
- java - 无法为分离的片段创建 ViewModelProvider - 如何在 AsyncTask 的 postExecute 中获取 ViewModel
- c++ - 在模板化 Rcpp 函数中调用另一个 cpp 函数
- apache-flink - 使用 Flink SQL 优化 Top-N 查询