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">
  <div style="border:1px solid silver; float:left; min-height:55px; width:500px;background-color:white;margin:5px 1px 1px 1px; display:none;">
  {CostTypeName}-{Quantity}-{ServicePeriodEndDate}
  </div>
      </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');
});