Pass through JSON array using Handlebars template engine

It is because you are saying for each data, loop through the array. However, you are passing in a plain old array to the Handlebar template. It is expecting an object with property data and an array value. So you could change your Handlebars template to this: -

<script id="template-app" type="text/x-handlebars-template">
    {{#each this}}
        Email: {{email}} <br/>
        First Name: {{first_name}} <br/>
        Last Name: {{last_name}} <br/>
    {{/each}}
</script>

--

Or alternatively, you could adapt the JSON data to work with your existing Handlebars template, like so: -

var json = {
    data: [{
        "first_name": "Betty",
        "last_name": "Sims",
        "email": "[email protected]"
    }, {
        "first_name": "Roger",
        "last_name": "Mendoza",
        "email": "[email protected]"
    }, {
        "first_name": "Albert",
        "last_name": "West",
        "email": "[email protected]"
    }, {
        "first_name": "Bobby",
        "last_name": "Lane",
        "email": "[email protected]"
    }, {
        "first_name": "Julie",
        "last_name": "Wheeler",
        "email": "[email protected]"
    }]
};

And for your JavaScript code, you just need a little change to get the above JSON:

$(function(){
    var theTemplateScript= $("#template-app").html();
    var theTemplate= Handlebars.compile(theTemplateScript);
    $.ajax({
        url: 'http://localhost/cb/MOCK_DATA.json',
        type: 'GET',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            var json_handlbars={
                data:result
            };
            var theCompiledHTML= theTemplate(json_handlbars);
            alert(theCompiledHTML);
            $(document.body).append(theCompiledHTML);

        }
    });
});