Underscore does not generate HTML

Question

The following code is not generating the HTML.

Underscore template:

<script type="text/template" id="features-template">
      <li class="list-group-item">
        <span class="badge"><%= score %></span>
        <%= prediction %>
      </li>
</script>

JSON:

{
    "features": {
        "status": true,
        "response": {
            "predictions": [
                ["shirt", "90.12"],
                ["jeans", "09.88"]
            ]
        }
    }
}

jQuery code:

var predictions = [];

_.each(response.features.response.predictions, function(prediction, i) {
     predictions.push({
          prediction: prediction[0],
          score: prediction[1]
     });
});

var tpl = _.template(featureTemplate, predictions));

console.log( tpl);

I can see the predictions array is created with values.

Why doesn't this code generate proper HTML?

Answer 1

I tested with the latest version of underscore (1.8.3), other versions may have differences.

The documentation of _.template says that the data is given after the compilation of the template:

var compiled = _.template(featureTemplate);
var tpl = compiled({predictions:predictions});

I also added a foreach loop in the template:

<script type="text/template" id="features-template">
  <% _.each(predictions, function(prediction) { %>
    <li class="list-group-item">
      <span class="badge"><%= prediction.score %></span>
      <%= prediction.prediction %>
    </li>
  <% }); %>
</script>