Maxim Velichkin Maxim Velichkin - 3 months ago 16
Javascript Question

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

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: http://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

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);