Mustache tags not working?

Question

Everytime i try to use the Mustache.js section tags for templating the content from json never gets passed or function breaks. I am not sure what i am doing wrong and tired of searching for a solution through forums and past questions. If anyone could help me i will be extremely grateful.

Here is my function:

$('body').on('click', '.logo', function(){
        alert('clicked');
        var request1 = $.ajax({
                url: "js/projects.js",
                dataType:'json',
            }).then(function(response){
                    var data = response.projects;
                    var template = $('#testing_tmp').html();
                    var project = Mustache.to_html(template, data);
                    return project;
            });
            $.when(request1).then(function(t) {
                $('#header').html(t);

            });
        });

Here is my template-mustache:

<script id="testing_tmp" type="text/template">
    {{#projects}}
        <div class='testingMus'>
            <div class='project'><figure><img src='{{{largePic}}}' alt='' />
            <figcaption class='caption'><span>{{genre}}</span></figcaption class='caption'></figure></div>
           </div>
        </div>
    {{/projects}}
    </script>

Sample of my json:

{
    "projects":[
        {
            "id":"0",
            "title":"Heller Recipes", 
            "description":"This web applications was developed to keep track of my dads recipes and make them easily accesible.He is now able to check each user and make a dinner based on what everybody likes or in some cases dont like. ",
            "technologiesUsed":"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0",
            "projectLink":"http://www.google.com",
            "genre":"web-app",
            "largePic":"img/projects/heller-recipes/thumb.jpg", 
            "desktopImg":"img/projects/heller-recipes/desktop.png",
            "desktopMobile":"img/projects/heller-recipes/mobile.png"
        },  
        {
            "id":"1",
            "title":"3D Animation", 
            "description":"Created using 4D Cinema Max, a 3d anitmation program that allows you to create realistic renderings and animations.",
            "technologiesUsed":"CodeIgniter, PHP, Sequel Pro, Javascript, jQuery,HTML5, CSS3, SASS, Foundation 5.0",
            "projectLink":"http://www.google.com",
            "genre":"3d",
            "largePic":"img/projects/4dmax.jpg",
            "desktopImg":"img/projects/heller-recipes/desktop.png",
            "desktopMobile":"img/projects/heller-recipes/mobile.png"
        }
    ]
}

Answer 1

You have a {{#projects}}{{/projects}} inside of your template but in your success-callback you pass the response.projects to the template. As of that the root element is an array and not an object containing the property projects.

You would need to pass response to your template directly.