數組數據解析以生成HTML表

Question

我有一個數據數組，我將需要根據這些數據生成一個html表，例如，如果day = Saturday，它應該放在Saturday列下。 我已附上預期輸出的圖片。 有人可以提出建議或提供有關如何實現此目標的想法嗎？

數組數據：

“ [{”開始“：” 20170211T123000“，”結束“：” 20170211T133000“，”摘要“：” SA Meeting1“，”天“：” SA“”開始“：” 20170106T170000“，”結束“：” 20170106T173000“ ，“ summary”：“星期五會議1”，“ day”：“ FR”“開始”：“ 20170106T180000”，“結束”：“ 20170106T183000”，“ summary”：“星期五會議2”，“ day”：“ FR”開始“：” 20160614T190000“，”結束“：” 20160614T194500“，”摘要“：”星期四會議“，”天“：” TH“”開始“：” 20160614T190000“，”結束“：” 20160614T194500“，”摘要“ ：“ Thur Meeting4”，“ day”：“ TH”“開始”：“ 20160620T160000”，“ end”：“ 20160620T164500”，“ summary”：“星期三Meeting1”，“ day”：“ WE”“ start”：“ 20160610T160000“，”結束“：” 20160610T163000“，”摘要“：”星期五meetin3“，”天“：” FR“”開始“：” 20160614T164500“，”結束“：” 20160614T173000“，”摘要“：”周四會議3 “，” day“：” TH“” start“：” 20160620T181500“，” end“：” 20160620T190000“，” summary“：” wed Meeting3“，” day“：” WE“” start“：” 20160620T181500“，”結束”：“ 20160620T190000”，“摘要”：“泰拳跆拳道”，“天”：“ WE”“開始”：“ 20160618T090000”，“結束”：“ 20160618T094500”，“摘要”：“ SA會議3”， “ day”：“ SA”“ start”：“ 20160618T094500”，“ end”：“ 20160618T103000”，“摘要”：“ SA會議2”，“天”：“ SA”“開始”：“ 20160613T190000”，“結束”：“ 20160613T194500”，“摘要”：“星期一會議2”，“天”：“ MO “”開始“：” 20160613T190000“，”結束“：” 20160613T194500“，”摘要“：”星期一會議1“，”天“：” MO“”開始“：” 20160613T173000“，”結束“：” 20160613T181500“，” summary“：” tues Meeting2“，” day“：” TU“” start“：” 20160613T173000“，” end“：” 20160613T181500“，” summary“：” tues Meeting 3“，” day“：” TU“}] “

html表如圖所示。

HTML表格

Answer 1

這是這樣做的一種丑陋方式。

首先，您需要以一種可以實際使用的方式對數據進行排序。

讓我們創建一個對象dict ，使每個屬性都是日，其對應的值是相關項的數組。

然后使用它來構建您的表。

 var items = [{ "start": "20170211T123000", "end": "20170211T133000", "summary": "SA meeting1", "day": "SA" }, { "start": "20170106T170000", "end": "20170106T173000", "summary": "friday meeting1", "day": "FR" }, { "start": "20170106T180000", "end": "20170106T183000", "summary": "friday meeting2", "day": "FR" }, { "start": "20160614T190000", "end": "20160614T194500", "summary": "Thur meeting2", "day": "TH" }, { "start": "20160614T190000", "end": "20160614T194500", "summary": "Thur meeting4", "day": "TH" }, { "start": "20160620T160000", "end": "20160620T164500", "summary": "wed meeting1", "day": "WE" }, { "start": "20160610T160000", "end": "20160610T163000", "summary": "friday meetin3", "day": "FR" }, { "start": "20160614T164500", "end": "20160614T173000", "summary": "Thur meeting3", "day": "TH" }, { "start": "20160620T181500", "end": "20160620T190000", "summary": "wed meeting3", "day": "WE" }, { "start": "20160620T181500", "end": "20160620T190000", "summary": "Muay Thai Kickboxing", "day": "WE" }, { "start": "20160618T090000", "end": "20160618T094500", "summary": "SA meeting 3", "day": "SA" }, { "start": "20160618T094500", "end": "20160618T103000", "summary": "SA meeting 2", "day": "SA" }, { "start": "20160613T190000", "end": "20160613T194500", "summary": "Monday meeting2", "day": "MO" }, { "start": "20160613T190000", "end": "20160613T194500", "summary": "Monday meeting1", "day": "MO" }, { "start": "20160613T173000", "end": "20160613T181500", "summary": "tues meeting2", "day": "TU" }, { "start": "20160613T173000", "end": "20160613T181500", "summary": "tues meeting 3", "day": "TU" }]; var dict = { 'MO': [], 'TU': [], 'WE': [], 'TH': [], 'FR': [], 'SA': [] }; // EDIT/TODO: probably want to sort your items here by date before sorting them into the dictionary // sort the data items.forEach(function(item) { if (dict.hasOwnProperty(item.day)) { dict[item.day].push(item); } }); // get maximum number of rows var rows = Math.max(...[dict.MO.length, dict.TU.length, dict.WE.length, dict.TH.length, dict.FR.length, dict.SA.length]); // print the table var html = '<table>'; // create table header html += '<tr>'; ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].forEach(function(day) { html += '<th>' + day + '</th>'; }); html += '</tr>'; // create table body html += '<tr>'; for (var i = 0; i < rows; i++) { html += '<tr>'; ['MO', 'TU', 'WE', 'TH', 'FR', 'SA'].forEach(function(day, j) { var info = dict[day][i]; html += '<td>' + (info ? info.summary : '') + '</td>'; }); html += '</tr>'; } html += '</tr>'; html += '</table>'; // put generated HTML into container output.innerHTML = html; 

 table { border-collapse: collapse; border: 1px solid #000; } th, td { border: 1px solid #000; } 

 <!-- container to hold table --> <div id="output"></div> 

有關使用Max.max()和散布運算符（即... ，請參閱此頁面上的最后一個示例 。

編輯

似乎數據沒有像您的示例中那樣被完全排序-這意味着您將需要進一步修復排序邏輯-但是此答案可以讓您有足夠的前進空間。

Answer 2

這是另一種方法-檢查底部的jsfiddle來運行它...

<table id="week" style="border-collapse: collapse;"> 
</table>
<script>

var headings = {
MO: "Monday",
TU: "Tuesday",
WE: "Wednesday",
TH: "Thursday",
FR: "Friday",
SA: "Saturday"
};

var daylist = [];
var daycnt = [];

var obj = [
{start:"20170211T123000",end:"20170211T133000",summary:"SA meeting1",day:"SA"},
{start:"20170106T170000",end:"20170106T173000",summary:"friday meeting1",day:"FR"},
{start:"20170106T180000",end:"20170106T183000",summary:"friday meeting2",day:"FR"},
{start:"20160614T190000",end:"20160614T194500",summary:"Thur meeting2",day:"TH"},
{start:"20160614T190000",end:"20160614T194500",summary:"Thur meeting4",day:"TH"},
{start:"20160620T160000",end:"20160620T164500",summary:"wed meeting1",day:"WE"},
{start:"20160610T160000",end:"20160610T163000",summary:"friday meetin3",day:"FR"},
{start:"20160614T164500",end:"20160614T173000",summary:"Thur meeting3",day:"TH"},
{start:"20160620T181500",end:"20160620T190000",summary:"wed meeting3",day:"WE"},
{start:"20160620T181500",end:"20160620T190000",summary:"Muay Thai Kickboxing",day:"WE"},
{start:"20160618T090000",end:"20160618T094500",summary:"SA meeting 3",day:"SA"},
{start:"20160618T094500",end:"20160618T103000",summary:"SA meeting 2",day:"SA"},
{start:"20160613T190000",end:"20160613T194500",summary:"Monday meeting2",day:"MO"},
{start:"20160613T190000",end:"20160613T194500",summary:"Monday meeting1",day:"MO"},
{start:"20160613T173000",end:"20160613T181500",summary:"tues meeting2",day:"TU"},
{start:"20160613T173000",end:"20160613T181500",summary:"tues meeting 3",day:"TU"}];


// start by sorting the data into time order
function compare(a,b) {
  if(a.start < b.start)
    return -1;
  if (a.start > b.start)
    return 1;
  return 0;
}
obj.sort(compare);

// first, setup the headers
var insert = "<tr>";
Object.keys(headings).forEach(function(key) {
  insert += "<th style='border:1px solid #000'>" + headings[key] + "</th>";
  daycnt[key] = 0;
  daylist[key] = {};
});

// now build up an array for each day of the week
var maxcnt = 0;
for(var i=0;i<obj.length;i++) {
  var day = obj[i].day;
  var index = daycnt[day];
  daylist[day][index] = obj[i].summary;
  daycnt[day] = daycnt[day] + 1;
  if(daycnt[day] > maxcnt) maxcnt = daycnt[day];
}

// now fill the table columns
for(var i=0; i<maxcnt; i++) {
  insert += "<tr>";
  Object.keys(headings).forEach(function(key) {
    if(daycnt[key]<=i)
      insert += "<td style='border:1px solid #000;padding:4px;'></td>";
    else
      insert += "<td style='border:1px solid #000;padding:4px;'>" + daylist[key][i] + "</td>";
  });
  insert += "</tr>";
}

document.getElementById("week").innerHTML = insert;

https://jsfiddle.net/FrancisMacDougall/sr6zfpbo/