JSFiddle - React, Tailwind, and code Playground
HTML
<table id="tableProducts"><tbody></tbody></table>
JavaScript
var jsonObj = {
[
{
"ImageName": "product1.png",
"Description": "Yummy choco"
},
{
"ImageName": "product2.png",
"Description": "candy villa"
},
{
"ImageName": "product3.png",
"Description": "vanilla icecream"
}
]
};
var htmlContent="";
function getTableRow(img, desc) {
return '\
<tr>\
<td>\
<img src="' + img + '">\
</td>\
<td>' + desc + '</td>\
</tr>';
}
$.each(jsonObj["products"],function(key,val){
htmlContent+= getTableRow(val["ImageName"],val["Description"]);
});
$('#tableProducts tbody').append(htmlContent);