JQuery Template Plugin. Fill template string with JSON data

You have a JSON data and a template string. So you can do it easy just use such code below:

1. /*
2. * jQuery Template plugin 1.3
3. *
4. * Copyright (c) 2009 Anton Kolodii
5. *
6. * Dual licensed under the MIT and GPL licenses:
7. *  http://www.opensource.org/licenses/mit-license.php
8. *  http://www.gnu.org/licenses/gpl.html
9. */
10. ;(function($) {
11.   function Property() {
12.     this.Name = "";
13.     this.pos = -1;
14.   };
15.   function PatternEntities() {
16.     this.str = "";
17.   };
18.   jQuery.extend( {
19.     prepare : function(str) {
20.       var NameList = new Array();
21.       var i = 0;
22.       while (true) {
23.         var sear = str.search(/{(.)*}/gi);
24.         if (sear == -1)
25.           break;
26.         var name = str.substring(sear + 1, str.indexOf("}"));
27.         if (name.indexOf("foreach:") == -1) {
28.           var property = new Property();
29.           property.pos = sear;
30.           property.Name = name;
31.           property.type = 'property';
32.           str = str.replace("{" + name + "}", "");
33.           NameList[i] = property;
34.         } else {
35.           //name = name.substring(8); //why .substring(8), because "foreach:" has 8 symbols and now name has such form "foreach:name"
36.           var nestedstr = str.substring(str.indexOf("}") + 1, str.indexOf("{/foreach:" + name.substring(8) + "}"));
37.           var strEntity = $.prepare(nestedstr);
38.           strEntity.pos = sear;
39.           strEntity.Name = name.substring(8);
40.           strEntity.type = 'entity';
41.           NameList[i] = strEntity;
42.           str = str.replace(new RegExp("{foreach:" + strEntity.Name + "}.*{\/foreach:" + strEntity.Name + "}", "i"), "");
43.         }
44.         i++;
45.       }
46.       var entity = new PatternEntities();
47.       entity.Name = "";
48.       entity.str = str;
49.       entity.type = 'root';
50.       entity.Parameters = NameList;
51.       return entity;
52.     },
53.  
54.     filltemplate : function(Entities, data) {
55.  
56.       function insert(str, ins, pos) {
57.         return str.substring(0, pos) + ins + str.substring(pos);
58.       }
59.       ;
60.  
61.       function fillTemplate(template, data, NameList) {
62.         var fultmpl = template;
63.         for (i = NameList.length - 1; i >= 0; i--) {
64.           fultmpl = insert(fultmpl, data[NameList[i].Name],
65.               NameList[i].pos);
66.         }
67.         return fultmpl;
68.       }
69.       ;
70.  
71.       var NameList = Entities.Parameters;
72.       var paternStr = Entities.str;
73.       if (NameList && NameList.length > 0) {
74.         for ( var i = NameList.length - 1; i >= 0; i--) {
75.           if (NameList[i].type == "entity") {
76.             if (NameList[i].Name) {
77.               var eachstr = "";
78.               $.each(data[NameList[i].Name], function(i, item) {
79.                 eachstr += $.filltemplate(NameList[i], item);
80.               });
81.               paternStr = insert(paternStr, eachstr, NameList[i].pos);
82.             } else {
83.               var eachstr = "";
84.               $.each(data, function(j, item) {
85.                 eachstr += $.filltemplate(NameList[i], item);
86.               });
87.               paternStr = insert(paternStr, eachstr, NameList[i].pos);
88.             }
89.           } else {
90.             paternStr = insert(paternStr, data[NameList[i].Name], NameList[i].pos);
91.           }
92.         }
93.       } else {
94.         return paternStr;
95.       }
96.       return paternStr;
97.     },
98.  
99.     stringformat : function(str, data) {
100.       var entities = $.prepare(str);
101.       return $.filltemplate(entities, data);
102.     }
103.   });
104. })(jQuery);

* This source code was highlighted with Source Code Highlighter.

So, for instance, your template string is:

template =
<div style="color: red;" >
Thank you.
{foreach:} <span style="color: green; margin: 10px;"> Wine - {wine} </span>
<span>Sugar - {sugar} Lemon is {lemon} </span> {/foreach:}
</div>

And your JSON data is:

  data = [{"wine":3,"sugar":4,"lemon":22},{"wine":2,"sugar":3,"lemon":12}]

So after executing function from this plug-in we receive new string:

  var resultstr = $.stringformat(template, data);

Return this result:

<div style="color: red;" >
Thank you.
<span style="color: green; margin: 10px;" > Wine - 3 </span>
<span> Sugar - 4 Lemon is 22
<span style="color: green; margin: 10px;"> Wine - 2 </span>
<span> Sugar - 3 Lemon is 12 </span>
</div>


Download js file from link

P.S. This is my first JQuery plug-in. Please write in comment if you have questions.

JQuery Template Plugin. Fill template string with JSON data