Binding data to html using Jquery and nunjucks

Question

I am trying to load the data to the element I tried logging the data on the javascript end and it does exist but I cant seem to figure out why it does not appear on the html. I have already also imported nunjucks. Any idea?

imported nunjucks

 <script src="https://cdnjs.cloudflare.com/ajax/libs/nunjucks/3.0.1/nunjucks.min.js"></script>

Jquery

$(document).ready(function(){
    var filterOptions ={
        year: [{value: '2019', checked: false, count: 10},{value: '2018', checked: false, count: 99},{value: '2017', checked: true, count: 10}],
        model: [{value: 'Eco Sports', checked: false, count: 8},{value: 'Edge', checked: true, count: 4},{value: 'Escape', checked: false, count: 10}],
        priceRange: [{value: '$10,000-$20,000', checked: false, count: 5},{value: '$20,000-$30,000', checked: false, count: 22},{value: '$30,000-$40,000', checked: false, count: 10}],
        mileage: [{value: '1-1000', checked: true, count: 10},{value: '1001-2000', checked: false, count: 64},{value: '2001-3000', checked: false, count: 10}],
        bodyStyle: [{value: '2dr Car', checked: false, count: 13},{value: '4dr Car', checked: false, count: 9},{value: 'Convertible', checked: true, count: 2}]
    }



    var template = $('#filterOptionsTemplate').html();
    var html = nunjucks.renderString(template, {filterOptions: filterOptions});
    $('#filterOptionWrapper').html(html);

html

  <script id="filterOptionsTemplate" type="text/nunjucks">
      <ul class="nav nav-pills">
      {% for opt, item in filterOptions %}
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
            aria-expanded="false">{{opt}}</a>
          <div class="dropdown-menu">
          {% for i in item %}
            <a href="#">
              <div class="inner">
                <div class="checkbox">
                  <label class="filter-label-item">
                    <input type="checkbox" data-prop="{{opt}}" value="{{i.value}}" {% if i.checked %} checked {% endif %}/>
                    <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                    <span>{{i.value}} <span class="badge badge-dark">{{i.count}}</span></span>
                  </label>
                </div>
              </div>
            </a>
          {% endfor %}
          </div>
        </li>
        {% endfor %}
      </ul>
    </script>

Check the console output :) I suppose that the `template` ( `nunjucks.renderString(template, ...`) is a not a string. — Aikon Mogwai, Oct 23 '19 at 11:12
Try to `var html = nunjucks.renderString('TEST {{x}}', {x: 'OK'}); $('#filterOptionWrapper').html(html);`. If you see `TEST OK` then `nunjucks` works. Another case is your `nunjuck`-template has masked special chars e.g. `%`, `<` and `>`. So, `nunjucks` cann't use it appropriate. — Aikon Mogwai, Oct 24 '19 at 11:06
what to do when the nunjcuk template has masked special characters? — Jhon Caylog, Oct 25 '19 at 02:06
the code i have works on the layout i created but when i integrated my back-end(backend-rendered) this no longer works — Jhon Caylog, Oct 25 '19 at 02:10

score 1 · Answer 1 · answered Oct 25 '19 at 13:22

Suppose that you have the next template

<div id = "items">
  {% for item in items %}
  <div>{{item}}</div>
  {% endfor %}
</div>

Try to output it to console before pass to renderString (use F12 to check console).
There are two possibilities: you will see original template or like below

&lt;div id = &quot;items&quot;&gt;
  {% for item in items %}
  &lt;div&gt;{{item}}&lt;/div&gt;
  {% endfor %}
&lt;/div&gt;

It means that escape was applied to template. To unescape use one of solutions from here e.g.

function htmlDecode(value){ 
  return $('<div/>').html(value).text(); 
}

I hope it helps.

Binding data to html using Jquery and nunjucks

imported nunjucks

Jquery

html

1 Answers1