underscore templates

underscore templates

HTML

<script type="text/html" id='usageList'>
    <table> 
      <thead> 
         <tr> 
            <th>HeaderId</th> 
            <th>Content</th> 
            <th>Date</th> 
            <th>Message in thread Count<th>
         </tr>
      </thead> 
      <tbody>
        <% _.each(selectedMessages, function(item, key, list) { %> 
             <% var f = item.content; %> 
              <tr> 
                  <td> <%= item.headerId %></td>
                   <td class="<%= f %>"><%= item.content %></td > 
                   <td class="<%= f %>"><%= item.dateOfMessage %></td > 
                   <td class="<%= f %>"><%= item.count %></td > 
                   
              </tr>
        <% });%>
    </tbody > 
   </table>
</script>
<!-- Create your target -->
<div id="target"></div>

JavaScript

var messages = [
    {
        id: 20,
        messageHeaderId: 6,
        content: "Message 1",
        dateOfMessage: "2017-08-16T12:34:49.403974",
        sender: "Diane"
    },
    {
        id: 22,
        messageHeaderId: 6,
        content: "Latest message from MH6",
        dateOfMessage: "2017-08-16T12:38:49.403974",
        sender: "Diane"
    },
    {
        id: 13,
        messageHeaderId: 5,
        content: "Message 1 from MH5",
        dateOfMessage: "2017-08-16T10:34:23.848459",
        sender: "Ora"
    },
    {
        id: 14,
        messageHeaderId: 5,
        content: "Latest message from MH5",
        dateOfMessage: "2017-08-16T12:37:12.237183",
        sender: "Ora"
    },

    {
        id: 15,
        messageHeaderId: 5,
        content: "Message 2 from MH5",
        dateOfMessage: "2017-08-16T11:00:35.547921",
        sender: "Ora"
    },

    {
        id: 16,
        messageHeaderId: 5,
        content: "Message 3 from MH5",
        dateOfMessage: "2017-08-16T11:36:51.828447",
        sender: "Ora"
    }
];

var selectedMessages = _.chain(messages)
    .sortBy('dateOfMessage')
    .reverse()
    .groupBy('messageHeaderId')
    .map(function(a) {
    a[0]['count'] = _.size(a);
    return a[0];
    })
    .map(function(b){
        return {
            content: b.content,
            dateOfMessage: b.dateOfMessage,
            headerId: b.messageHeaderId,
            count: b.count
            //count ??
        }
    })
    .value();
 
var template = usageList.innerHTML;
target.innerHTML = _.template(template,{selectedMessages:selectedMessages});