JSFiddle - React, Tailwind, and code Playground
HTML
<div if="foods">
<div class="food-menu">
<img src=/{{image}}>
<p> {{name}} </p>
<p> {{price}} </p>
</div>
</div>
JavaScript
data.forEach(function(b) {
var newFood = prototype.clone().appendTo($("#foods"));
newFood.html().replace(/(\{\{(\w+)\}\})/gi, function(matches, istMatch) {
return b[matches];
});
data = [{
"_id": "588b1fcb74e6c500d0d06bf8",
"type": "cakes",
"name": "white cake",
"price": "53.115585580044765",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06bf9",
"type": "cakes",
"name": "strawberry cake",
"price": "70.97793026186996",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06bfa",
"type": "cakes",
"name": "cupcakes",
"price": "49.96683058076812",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06bfb",
"type": "cakes",
"name": "chocolate cake",
"price": "44.344115951103035",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06bfc",
"type": "cakes",
"name": "berry cake",
"price": "47.17550216232682",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06bfd",
"type": "drinks",
"name": "whiskey",
"price": "0.028678076457766544",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06bfe",
"type": "drinks",
"name": "vodka",
"price": "58.894390375434135",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06bff",
"type": "drinks",
"name": "juice",
"price": "77.30969339423659",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c00",
"type": "drinks",
"name": "heineken",
"price": "65.3927295846118",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c01",
"type": "drinks",
"name": "coke",
"price": "2.2636518712426",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c02",
"type": "snacks",
"name": "popcorn",
"price": "64.2930268142774",
...