A function that compiles the JSON content with Handlebars templates is not working (syntax error?)

Question

There is a web page that is filled with content from JSON file using Handlebars (thank you very much user6709129 for a detailed explanation of this technology: https://stackoverflow.com/a/38947838/6530539).

So I have:

• Index.html
• content.JSON
• contentProcessing.js

contentProcessing.js:

function sendGet(callback) {
    /* create an AJAX request using XMLHttpRequest*/
    var xhr = new XMLHttpRequest();
    /*reference json url taken from: http://www.jsontest.com/*/

    /* Specify the type of request by using XMLHttpRequest "open", 
       here 'GET'(argument one) refers to request type
       "http://date.jsontest.com/" (argument two) refers to JSON file location*/
    xhr.open('GET', "http://date.jsontest.com/");

    /*Using onload event handler you can check status of your request*/
    xhr.onload = function () {
        if (xhr.status === 200) {
            callback(JSON.parse(xhr.responseText));
        } else {
            alert(xhr.statusText);
        }
    };

    /*Using onerror event handler you can check error state, if your request failed to get the data*/
    xhr.onerror = function () {
        alert("Network Error");
    };

    /*send the request to server*/
    xhr.send();
}

//For template-1
var dateTemplate = document.getElementById("date-template").innerHTML;
var template = Handlebars.compile(dateTemplate);

sendGet(function (response) {
    document.getElementById('testData').innerHTML += template(response);
})

It works great!

Now I want to wrap the Javascript code in a function (let's call it contentPrepare), that uses three variables:

1. The path to the JSON file
2. Id of the Handlebars template
3. Div Id where the content should be placed

Then I want to use this function in the other Javascript file - addContent.js, which will use this function several times with different variables, and thus fill the site with content.

Why it does not work in my test example?

var jsonDir = "json/test.json";
var templId = "date-template";
var finId = 'testData';

function contentPrepare (jsonDir, templId, finId){
function sendGet(callback) {
    /* create an AJAX request using XMLHttpRequest*/
    var xhr = new XMLHttpRequest();
    /*reference json url taken from: http://www.jsontest.com/*/

    /* Specify the type of request by using XMLHttpRequest "open", 
       here 'GET'(argument one) refers to request type
       "http://date.jsontest.com/" (argument two) refers to JSON file location*/
    xhr.open('GET', jsonDir);

    /*Using onload event handler you can check status of your request*/
    xhr.onload = function () {
        if (xhr.status === 200) {
            callback(JSON.parse(xhr.responseText));
        } else {
            alert(xhr.statusText);
        }
    };

    /*Using onerror event handler you can check error state, if your request failed to get the data*/
    xhr.onerror = function () {
        alert("Network Error");
    };

    /*send the request to server*/
    xhr.send();
}

//For template-1
var dateTemplate = document.getElementById(templId).innerHTML;
var template = Handlebars.compile(dateTemplate);

sendGet(function (response) {
    document.getElementById(finId).innerHTML += template(response);
})
}

P.S.
Eventually, contentProcessing.js and addContent.js will be connected as a commonJS modules and compiled into a single Javascript file using Browserify.

Answer 1

After you have wrapped all your logic into a function - you still should invoke it (that's the whole purpose of having functions)

The call would presumably look something like

var jsonDir = "json/test.json";
var templId = "date-template";
var finId = 'testData';

contentPrepare(jsonDir, templId, finId);