If you're looking for a solution, I've created a small library that can assist you in that task. You can access it on github:
https://github.com/blauharley/TemplateJS
Here's a preview of what you can achieve with this library:
var objs = [
{ dim: { x: 25, y:14, z: 3}, name: 'circle'},
{ dim: { x: 19, y:17, z: 8}, name: 'triangle'},
{ dim: { x: 7, y:44, z: 12}, name: 'quad'},
{ dim: { x: 13, y:63, z: 67}, name: 'circle'},
{ dim: { x: 5, y:23, z: -2}, name: 'rectangle'}
];
var templ = new TemplateJS();
// Separate multiple values with pipes (|)
var str = "<p>{name}: | <b style='color:green'>{dim}{x}px</b> | <b style='color:red'>{dim}{y}px</b> | <b style='color:yellow'>{dim}{z}px</b></p>";
templ.transformTemplate(objs,str);
There are two main methods available, but transformTemplate aligns with your current query. It generates an array of strings based on the provided objects. Each object's property values are inserted into the string specified in the second parameter. Ultimately, transformTemplate produces an array of transformed strings.
The second method, insertTemplate, serves a similar purpose but is mainly used for inserting multiple values into HTML elements.
By using Pipes | to separate object values and employing curly braces for placeholders, this library can handle potentially unlimited object nestings (excluding arrays), as demonstrated in the Jasmine TestCase.
However, both methods require an array of objects as the first parameter. To leverage this library effectively, consider utilizing it in the following manner:
var source = {
'root':
{
'infos':
{
'sport': [
{
'name': 'tennis'
},
{
'name': 'basket'
}
]
}
}
};
var templ = new TemplateJS();
// Separate multiple values with pipes (|)
var str = '{name}';
templ.transformTemplate(source.root.infos.sport, str); // ["tennis", "basket"]
Moreover, extensive testing has been conducted across all browsers to ensure compatibility.