title: JSON data in nunjucks templating, using gulp-data
body: <p>I would like to use JSON data inside of nunjucks "set". A minimal example:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>{% set divname='foo' %}
  {% include 'template.nunjucks' %}
  </code></pre>
  
  <p><strong>template.nunjucks</strong></p>
  
  <pre><code>&lt;div class="{{divname}}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Which works great. I would like to move data, for example the divname, out of the index.html file and into a JSON file, lets name it <strong>data.json</strong>:</p>
  
  <pre><code>{
  "div_name": "foo"
  }
  </code></pre>
  
  <hr>
  
  <p>Using gulp-data, we can read this data.json file and use {{div_name}} almost anywhere in index.html..almost. It doesn't seem possible to use {{div_name}} inside of nunjucks content, likely due to nested { ?</p>
  
  <pre><code>{% set divname='{{div_name}}' %}
  </code></pre>
  
  <p>fails to pull in the JSON data, the output is</p>
  
  <pre><code>&lt;div class="{{divname}}"&gt;&lt;/div&gt;   instead of   &lt;div class="foo"&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>A very simplified reason for wanting this behavior is so that in data.json I can define multiple divnames (divname1=foo, divname2=bar, divname3=ball) and then reuse template.nunjucks. When the markup in template.nunjucks or index.html becomes very complicated, this is a great way to use the power of templating engines. The real use case is a very long/semi-complicated AWS CloudFormation template where resource names are used in multiple places, and on top of that different data.json files are used for dev and prod environments. Moving values to dev-data.json and prod-data.json while maintaining only one "index" file for the infrastructure definition, which pulls in templates will make things much more maintainable</p>
  
  <pre><code>{% set divname={{divname1}} %}
  {% include 'template.nunjucks' %}
  {% set divname={{divname2}} %}
  {% include 'template.nunjucks' %}
  </code></pre>
  
  <p><strong>dev-data.json</strong></p>
  
  <pre><code>divname1 = dev-foo
  divname2 = dev-bar
  </code></pre>
  
  <p><strong>prod-data.json</strong></p>
  
  <pre><code>divname1 = foo
  divname2 = bar
  </code></pre>
  
  <p>Voila, different data for dev and prod with one single index.html file to maintain</p>