JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<table id="details">
    <tbody></tbody>
</table>

JavaScript

$(document).ready(function(){
    var theJson = { "productRewards":[
{
    "productList": "New Sales",
    "sales": "25",
    "awards": "500"
},
{
    "productList": "TV",
    "sales": "12",
    "awards": "18"
},
{
    "productList": "TV Completers",
    "sales": "7",
    "awards": "210"
},
{
    "productList": "HSI Enhanced",
    "sales": "15",
    "awards": "150"
},
{
    "productList": "MODULE",
    "sales": "68",
    "awards": "360"
}
]
};
    function rowBuilder(value) {
          return '<tr>'
                + '<td>'
                      + value.productList
                + '</td>'
                + '<td class="center">'
                      + value.sales
                + '</td>'
                + '<td class="center">'
                      + value.awards
                + '</td>'
          + '</tr>';
    }

    $.each(theJson.productRewards, function(k,v){
        $('#details tbody').append(rowBuilder(v));
    });
});