Mustache.js shielding "/"

Question

I have a simple JSON file as shown below:

{ "products": [ { "title": "United Colors of Benetton Men Shirt", "description": "Cool, breezy and charming – this solid green shirt from United Colors of Benetton is born on the beach. Effortlessly classy, this full sleeved shirt is perfect when worn with faded blue jeans and a pair of shades for a weekend get-together.", "quantity": "10", "cost": "3.00", "brand": "United", "image": "catalog/images/img2.jpg", "category": "1", "popularity": "100" } ] } 

I show this JSON file using Mustache.js in a template hit:

 <table class="product-list"> {{#products}} <tr> <td> <table class="product"> <tr> <td class="product-image"> <img src"{{image}}" height="150" width="150" /> </td> <td class="product-details"> <p class="title">{{title}}</p> <p class="description">{{description}}</p> <p class="quantity"><b>Quanity Available: </b>{{quantity}}</p> <p class="cost"><b>Cost: </b>&pound; {{cost}}</p> <p class="brand"><b>Brand:</b> {{brand}}</p> </td> </tr> </table> </td> </tr> {{/products}} </table> 

Everything works fine, but for some reason, the slash in the image property is escaped, which is why the images are not displayed.

I tried to snatch slashes in a JSON file by adding a backslash in front of them. But instead of the right way, I get this.

 catalog\/images\/img2.jpg 

I am also trying to disable HTML escaping using {{{image}}} and I get this.

 catalog\="" images\="" img2.jpg=\"" 

How can I display the image property correctly?

Can anyone help me with this?

Edit: JS is used to create the template:

 $template = $('#product-template').html(); $renderedHtml = Mustache.render($template, $data); $('#content').html($renderedHtml); 

Answer 1

From what I see, it should work with a triple mustache {{{image}}} . You also lack = after src .

Example script:

 var jsn = { "products": [{ "title": "United Colors of Benetton Men Shirt", "description": "Cool, breezy and charming – this solid green shirt from United Colors of Benetton is born on the beach. Effortlessly classy, this full sleeved shirt is perfect when worn with faded blue jeans and a pair of shades for a weekend get-together.", "quantity": "10", "cost": "3.00", "brand": "United", "image": "http://static.cilory.com/26111-large_default/united-colors-of-benetton-men-white-t-shirt.jpg", "category": "1", "popularity": "100" } ] }; var t = document.getElementById('template').innerHTML; var m = Mustache.to_html(t, jsn); document.getElementById('res').innerHTML = m; console.log(m); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script> <script id="template" type="text/template"> <table class="product-list"> {{#products}} <tr> <td> <table class="product"> <tr> <td class="product-image"> <img src="{{{image}}}" height="180" width="150" /> </td> <td class="product-details"> <p class="title">{{title}}</p> <p class="description">{{description}}</p> <p class="quantity"><b>Quanity Available: </b>{{quantity}}</p> <p class="cost"><b>Cost: </b>&pound; {{cost}}</p> <p class="brand"><b>Brand:</b> {{brand}}</p> </td> </tr> </table> </td> </tr> {{/products}} </table> </script> <div id="res"></div>