underscore templates

underscore templates

HTML

<script type="text/html" id='usageList'>
    <table> 
      <thead> 
         <tr> 
            <th> Id </th> <th>Name</th> 
         </tr>
      </thead> 
      <tbody>
        <% _.each(items, function(item, key, list) { %> 
             <% var f = item.name; %> 
              <tr> 
                  <td> <%= key %></td>
                   <td class="<%= f %>"><%= item.name %></td > 
              </tr>
        <% });%>
    </tbody > 
   </table>
</script>
<!-- Create your target -->
<div id="target"></div>

CSS

body
{
  font-family: "Brush Script MT", cursive;
}

table {
    font-size: large;
    border:1px solid #000;
    width:20%;
    background-color: blue;
    color: white;
    border-radius: 10px 10px;
    border-spacing: 2px;
    border-collapse: separate;
}
th, td {
    padding:5px;
}

JavaScript

var items = [
        {name:"Alejandro"},
        {name:"Benito"},
        {name:"Chinea"},
        {name:"Domingo"},
        {name:"Eduardo"},
        {name:"..."},
        {name:"Yolanda"},
        {name:"Zacarias"}
    ];
 
var template = usageList.innerHTML;
target.innerHTML = _.template(template,{items:items});


var coll={"Id":"01-10-2019 19:01:46_start","BreakType":"ChkInChkOut","BreakTypeDescription":"Complete Day","Date":"01-10-2019","StartTime":null,"EndTime":null,"ClockedIn":"2019-01-10T19:01:46+05:30","ClockedOut":"2019-01-10T19:03:54+05:30","UpdatedClockIn":"2019-01-10T19:15:32+05:30","UpdateBreakTime":null,"HrsCalculated":"00:13","MaxDurationBreakTime":null};


 var formattedClockedIn = moment(firstClockIn.ClockedIn).format('LT');
 alert(formattedClockedIn);
coll.ClockedIn = formattedClockedIn;
alert(JSON.stringify(coll));