Array data parse to generate HTML table

Question

I have an array of data from which i would need to generate a html table, for instance if day = Saturday, it should be go under the column Saturday. I have attached a picture of the expected output. Could someone please suggest or give an idea as to how to achieve this?

Array data :

"[{"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"}]"

Html table as shown in the picture.

HTML table

Possible duplicate of [Create HTML table from JavaScript object](http://stackoverflow.com/questions/17684201/create-html-table-from-javascript-object) — prieston, Mar 07 '17 at 03:23

Mikey · Answer 1 · 2017-03-13T03:25:34.983

Here's one ugly way of doing it.

You first need to sort your data in such a way that you can actually use it.

Let's create an object dict such that each property is the day and its corresponding value is an array of the related items.

And then use it to build your table.

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>

For information regarding the use of Max.max() and spread operator i.e. ..., look at the last example on this page.

Edit

It seems the data is not fully sorted as in your example -- which means you will need to fix the sorting logic some more -- but this answer gives you enough to move forward.

Thanks a lot for your help for a simpler solution.... can i ask you one question please? How can i ignore a array if the day=SU? I thought the belwo code by itseld will skip if the day is not the given list,.... please advise... ['MO', 'TU', 'WE', 'TH', 'FR', 'SA'].forEach(function(day, j) — TTT, Mar 13 '17 at 03:14
The dictionary does not include Sunday, so when you add the items to the dictionary, you can simply check if the day is in the dictionary. Check last edit. — Mikey, Mar 13 '17 at 03:28
Got it...ok great it works..! one last question...I am update the style in html instead of css..and update the changes in this fiddle..http://jsfiddle.net/Thea123/csgksg6g/ any idea what am missing here.. the style is not working :( — TTT, Mar 13 '17 at 23:37
You should mark the answer as answered then. Maybe missing single quote `'` (line 119) ? If not, then you should ask this as a new question. — Mikey, Mar 13 '17 at 23:49

fmacdee · Answer 2 · 2017-03-07T04:18:11.720

Here is another way to do it - check the jsfiddle at the bottom to run it...

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

Hi... Thank u so much...It helps a lot..!! Appreciated – TTT Mar 13 '17 at 03:11 — TTT, Mar 13 '17 at 03:11

Array data parse to generate HTML table

2 Answers2