I have a DOM element with children that contain placeholders. I need to loop through the object in the JSON array and replace the placeholders with corresponding keys in the array.
What I have tried:
Here is the html element I wish to prototype:
<pre><div id="foods">
<div class="food-menu">
<img src=/{{image}}>
<p>{{name}}</p>
<p>{{price}}</p>
</div>
</div>
Then my JS code is as follows:
var prototype = $(".food-menu").eq(0);
data.forEach(function(b) {
var newFood = prototype.clone().appendTo($("#foods"));
newFood.html().replace(/(\{\{(\w+)\}\})/gi, function(matches, istMatch) {
return b[istMatch.toString()];
});
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",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c03",
"type": "snacks",
"name": "hamburger",
"price": "48.89626145534767",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c04",
"type": "snacks",
"name": "digestive biscuits",
"price": "93.3497353037074",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c05",
"type": "snacks",
"name": "chips",
"price": "63.459315048229016",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c06",
"type": "snacks",
"name": "chin chin",
"price": "9.608763915240747",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c07",
"type": "soups",
"name": "Ogbono",
"price": "64.40284806037988",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c08",
"type": "soups",
"name": "egusi",
"price": "99.68697142243515",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c09",
"type": "soups",
"name": "efo riro",
"price": "89.32812199871545",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c0a",
"type": "soups",
"name": "Edikaikong",
"price": "29.871174566764623",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c0b",
"type": "soups",
"name": "bitter leaf",
"price": "40.503677589544786",
"__v": 0
}, {
"_id": "588b1fcb74e6c500d0d06c0c",
"type": "soups",
"name": "afang",
"price": "36.13059103755023",
"__v": 0
}]
Demo fiddle is here
Edit fiddle - JSFiddle[
^]
It just replaces nothing :(