使用JavaScript数组到html表

Question

I have data in Array format as below... (sample one) this is an array..Based on data , I need to generate a html table by custom condition... say, table header will be day1,2,3,4,5,6 and below array has to be based for each header to add row based on the conditions... I have given the details for reference

 var array=   [{"day":1,"summary":"proge1"},
    {"day":1,"summary":"proge2"},
    {"day":1,"summary":"proge3"},
    {"day":2,"summary":"Tues1"},
    {"day":2,"summary":"Tues2"},
    {"day":2,"summary":"Tues3"},
    {"day":3,"summary":"Wed1"},
    {"day":3,"summary":"Wed2"},
    {"day":3,"summary":"Wed3 "},
    {"day":4,"summary":"Thur1"},
    {"day":4,"summary":"Thur2"},
    {"day":5,"summary":"Fri1"},
    {"day":6,"summary":"Sat1"}]

I want to generate a html table based on this data such that it should display as below..can someone please suggest me how to accomplish this..

    <table>
     <tr>
                       <td align="center">Day1</td>
                        <td align="center">Day2</td>
                        <td align="center">Day3</td>
                        <td align="center">Day4</td>
                        <td align="center">Day5</td>
                        <td align="center"> Day6 </td>
        </tr>
     </table>    

output:

    ----------------------------------------------
    Day1    |Day2   Day3    Day4    Day5    Day6
   -----------------------------------------------
    proge1  Tue1    Wed1    Thur1   Fri1    Sat1

    proge2  Tue2    Wed2    Thur2       
    proge3  Tue3    Wed3            

Is that we need to call function (day) for each td and generate table by the values?

Answer 1

So you need to have arrays with unique values:

var  newarray=[];
 array.forEach(function(el){
   for(var depth=0;depth<newarray.length;depth++){
       newarray[pos]=newarray[pos]||[];
       if(!newarray[pos][el.day-1]){//if the day isnt filled, day 1 is at position zero ( thats why -1)
          newarray[pos][el.day-1]=el;
          return;
       }
  }
});

This will create a table like structure:

newarray=[
   [{day:1 ...},{day:2}]
   [{day:1}]
];

Now you can loop trough and build your table:

table=newarray.map(function(row){
  var newrow="<tr>";
  newrow+=row.map(function(el){
        return "<td>"+el.summary+"</td>";
  }).join("");
 newrow+="</tr>";
 return newrow;
}).join("");//make string

Then append it to your dom:

 document.body.innerHTML=table;