用来自JSON对象的值替换占位符 [英] Replace placeholder with value from JSON object

问题描述

我有一个带有包含占位符的子元素的DOM元素。我需要循环遍历JSON数组中的对象，并用数组中的相应键替换占位符。



我尝试过：



这是我想要原型的html元素：

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>

然后我的JS代码如下：

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
      }]

演示小提琴在这里编辑小提琴 - JSFiddle [ ^ ]

它只是不替换任何内容： （

Demo fiddle is here Edit fiddle - JSFiddle[^]
It just replaces nothing :(

推荐答案

（ 。food-menu）。 eq（ 0 ）;

data.forEach（ function （b）{
var newFood = prototype.clone（）。appendTo（

(".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： 白色蛋糕，
price： 53.115585580044765，
__ v： 0
}，{
_ id： 588b1fcb74e6c500d0d06bf9，
type： cake，
name： 草莓蛋糕，
price： 70.97793026186996，
__ v： 0
}，{
_ id： 588b1fcb74e6c500d0d06bfa，
type： cake，
名称： cupcakes，
price： 49.96683058076812，
__ v： 0
}，{
_ id： 588b1fcb74e6c500d0d06bfb，
< span class =code-string> type： cakes，
name： < span class =code-string> chocolate cake，
price： 44.344115951103035，
__ v： 0
}，{
_ id： 588B 1fcb74e6c500d0d06bfc，
type： cakes，
name： berry cake，
price： 47.17550216232682，
__ v： 0
}，{
_ id ： 588b1fcb74e6c500d0d06bfd，
type： dri nks，
name： 威士忌，
price： 0.028678076457766544，
__ v： 0
}， {
_ id： 588b1fcb74e6c500d0d06bfe，
type ： drink，
name： vodka ，
price： 58.894390375434135，
__ v： 0
}，{
_id： 588b1fcb74e6c500d0d06bff，
type： 饮料，
name： juice，
价格： 77.30969339423659，
__ v： 0
}，{
_ id： 588b1fcb74e6c500d0d06c00，
键入： drink，
name： heineken，
price： 65.3927295846118，
__ v： 0
}，{
_ id： 588b1fcb74e6c500d0d06c01，
type： drink，
name： coke，
price： 2.2636518712426，
__ v： 0
}，{
_ id： 588b1fcb74e6c500d0d06c02，
type： snack，
name： popcorn，
price： 64.2930268142774，
__ v： 0
}，{
_ id： 588b1fcb74e6c500d0d06c03，
type： snack，
名 ： hamburger，
price： 48.89626145534767 ,
\"__v\": 0
}, {
\"_id\": \"588b1fcb74e6c500d0d06c04\",
\"type\": \"snacks\",
< span class=\"code-string\">\"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
}]

("#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 r eplaces nothing :(

Demo fiddle is here Edit fiddle - JSFiddle[^]
It just replaces nothing :(

The current, more robust function looks like this

The current, more robust function looks like this

function renderConstruct(datas, target, prototype) {

这篇关于用来自JSON对象的值替换占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！