title: Generally convert a mustache template to a JSON object
body: <p>When working with Mustache, or any templating engine, a properly structured JSON object is needed to render some specific template. Generally (I believe), a developer knows their application's data model, and how they want to show data in a template, but find that their data model doesn't perfectly output JSON in the form their templates expect. So we often need to write data processing functions that <strong>transform</strong> data model outputs into acceptable mustache template inputs.</p>
  
  <p>For example, <a href="https://stackoverflow.com/q/17283776/3491991">@Liang</a>'s application outputs a JSON array like:</p>
  
  <pre><code>"prop":{"brands":["nike","adidas","puma"]}
  </code></pre>
  
  <p>but his template expects it to be in the form:</p>
  
  <pre><code>"brands":[{"name":"nike"},{"name":"adidas"},{"name":"puma"}]
  </code></pre>
  
  <p>so he needs to transform it via:</p>
  
  <pre><code>var data = {brands: obj.prop['brands'].map(function(x){ return {name: x}; })};
  </code></pre>
  
  <p>Liang also could have <a href="https://stackoverflow.com/a/17284342/3491991">tweaked his template</a> to get it working without a data transformation step. But what if I don't know what the template is before hand and my only template guarantee is that its tags resolve to keys in my data model. Is it possible to write a function <code>bridge(data_model, template)</code> which takes as input the data model and mustache template and outputs the transformation function <code>Transform</code>. Such that <code>Transform</code> itself is the code which massages the data model outputs into acceptable mustache template inputs.</p>
  
  <p>Said another way, if</p>
  
  <p><code>data_model = "prop":{"brands":["nike","adidas","puma"]}</code></p>
  
  <p>and</p>
  
  <p><code>template = {{#brands}}
               &lt;b&gt;{{name}}&lt;/b&gt;
             {{/brands}}</code></p>
  
  <p>then what <code>bridge</code> produces the javascript</p>
  
  <p><code>{brands: obj.prop['brands'].map(function(x){ return {name: x}; })}</code> = <code>bridge(data_model, template)</code></p>
  
  <p>(the output of <code>bridge</code> would be javascript code). </p>
  
  <p>I understand that this may be too unconstrained to give a good answer, but I think everyone can recognize that at a minimum, <code>bridge</code> would need to be able to output nested <code>for loops</code> or <code>map</code> commands. How could I go about making perhaps a crude version of <code>bridge</code> that has <code>for loop</code> commands in the right places respective to mustache tags?.. sorry if this doesn't make great sense, it's a challenging question for me to articulate. Honestly, it feels a bit like asking for magic.</p>