How to render mustache template locally

Question

I am trying to use mustache and jQuery to import a JSON and create a html template.

I have followed tutorials to get to this point, but nothing shows in the browser and there are no error messages.

HTML

div id="repeatcontent"/div 

Script: I import mustache, greate the template script and then use javascript to import the JSON.

 <script src=mustache.min.js></script>

<script id="tutorials" type="text/template">
        {{#a_tutorials}}
            <p>{{title}}<p/>
        {{/a_tutorials}}
    </script>


<script type="text/javascript">
        $(document).ready(function(){ 
            $.getJSON('audacity_tutorials.JSON', function(data) {
                var template1 = $('#tutorials').html();
                var html = Mustache.to_html(template1, data);
                $('#repeatcontent').html(html);
            });
        });
</script>

JSON

{   
    "A_tutorials" : [
        {
             "Title" : "Binary",
        },
        {
             "Title" : "Clipping", 
        }
     ]
}

There are no error messages, and the screen is completely blank. I have also used console.log to try and figure it out but it returns all the data I ask it for.

Answer 1

Your mistakes are:

• A_tutorials in json file while you use a_tutorials in js
• Title in json file while you use title

• your json file is incorrect. For instance this line

  "Title" : "Binary",

must be changed with:

"Title" : "Binary"

You may test json online by yourself.

Mustache is case sensitive.

 // $.getJSON('z.json', function(data) { var data = { "A_tutorials" : [ { "Title" : "Binary" }, { "Title" : "Clipping" } ] }; var template1 = $('#tutorials').html(); var html = Mustache.to_html(template1, data); $('#repeatcontent').html(html); // }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> <script id="tutorials" type="text/template"> {{#A_tutorials}} <p>{{Title}}<p/> {{/A_tutorials}} </script> <div id="repeatcontent"></div>