JSFiddle - React, Tailwind, and code Playground

by LijoCheeran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
  <script id="template" type="text/html">
    <table width="277" height="146" border="1" style="display:none;">
      <tr>
        <td width="97">{CostTypeName}</td>
        <td width="87">{Quantity}</td>
         <td>{ServicePeriodEndDate}</td>
      </tr>
    </table>
  </script>
</body>

JavaScript

var result =[{"CostTypeName":" Cost1","Quantity":1.00,"ServicePeriodEndDate":"\/Date(1514678400000)\/"},{"CostTypeName":"Cost2","Quantity":0,"ServicePeriodEndDate":"\/Date(1488499200000)\/"},{"CostTypeName":"Cost3","Quantity":2,"ServicePeriodEndDate":"\/Date(1488499200000)\/"}
]

var template = $('#template').html();

function render(template, data) {
  var patt = /\{([^}]+)\}/g;
  return template.replace(patt, function(_, key) {
    return data[key];
  });
}

$.each(result, function(index,item) 
{        
    //alert(item.CostTypeName);
    var divRef = render(template, item);
    $(divRef).appendTo('body').show('slow');
});