Maxim Velichkin Maxim Velichkin - 1 year ago 70
HTTP Question

How can I make HTML fill itself with the content from the JSON file using handlebars?

I need to make HTML fill itself with content from JSON file using the mustache, or handlebars.

I created two simple HTML templates for testing (using handlebars) and filled them with content from an external Javascript file.

Now I need content to lay initially in a JSON file.

I ran into two problems, but they both lie at the heart of solutions of the same main problem - creating a link between the content in the JSON file and HTML, so I decided to ask them in the same question.

(If you think that it is necessary to ask these questions separately, please answer one of the questions, I will remove the second and ask it separately.)

  1. How can I connect JSON and HTML? As far as I know there is a way, using AJAX, and there's a way that uses a server. AJAX is a new language for me, so I would be grateful for an explanation of how can I do it, using local HTTP server, that I created using Node.JS.

  2. What should be the syntax in a JSON file? The script in the JSON file must be the same, as a script in Javascript file, but then it should be processed with the help of
    function, is that correct? Or syntax in JSON file should be different?

    For example, if we consider my example (link above), the code for the first template in the JSON file must be the same as in the Javascript file, but before the last line
    document.getElementById('quoteData').innerHTML += quoteData;
    , I have to write the following line
    var contentJS = JSON.parse(quoteData);
    , and then change the name of the variable in the last line, so it will be:
    document.getElementById('quoteData').innerHTML += contentJS;
    , Is it right?

Answer Source

Try this:


<!-- template-1 -->
<div id="testData"></div>
<script id="date-template" type="text/x-handlebars-template">
  Date:<span> <b>{{date}}</b> </span> <br/> Time: <span><b>{{time}}</b></span>


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

    /* Specify the type of request by using XMLHttpRequest "open", 
       here 'GET'(argument one) refers to request type
       "" (argument two) refers to JSON file location*/'GET', "");

    /*Using onload event handler you can check status of your request*/
    xhr.onload = function () {
        if (xhr.status === 200) {
        } else {

    /*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*/

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

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


JSON data format derives from JavaScript, so its more look like JavaScript objects, Douglas Crockford originally specified the JSON format, check here.

JavaScript Object Notation has set of rules.

  1. Starts with open curly braces ( { ) and ends with enclosing curly braces ( } ) ex: {}

  2. Inside baces you can add 'key' and its 'value' like { "title" : "hello json"} here "title" is key and "hello json" is value of that key.

  3. "key" should be string

  4. "value" can be:

  5. Can not add JavaScript comments inside JSON (like // or /**/)

there are many online JSON validators, you can check whether your JSON is valid or not, check here.

When comes to linking JSON to js file, its more like provide an interface to get JSON data and use it in your JavaScript.

here XMLHttpRequest our interface. we usually call XMLHttpRequest API.

In the given js code, to get JSON from the server using an REST API (

for more information on REST API you can check here

from the url: you can get JSON object like below.

   "time": "03:47:36 PM",
   "milliseconds_since_epoch": 1471794456318,
   "date": "08-21-2016"
Note: data is dynamic; values change on each request.

So by using external API you can get JSON, to use it in your JavaScript file/ code base you need to convert JSON to JavaScript object,
JSON.parse( /* your JSON object is here */ ) converts JSON to js Object

`var responseObject = JSON.parse(xhr.responseText)`

by using dot(.) or bracket ([]) notation you can access JavaScript Object properties or keys; like below.

console.log(responseObject.time) //"03:47:36 PM"
console.log(responseObject["time"]) //"03:47:36 PM"

console.log(responseObject.milliseconds_since_epoch) //1471794456318

console.log( //"08-21-2016"
console.log(responseObject["date"]) //"08-21-2016"

So to link local JSON file (from your local directory) or an external API in your JavaScript file you can use "XMLHttpRequest".

'sendGet' function updatedin the above js block with comments please check.

In simple way:

  1. create XMLHttpRequest instance
    ex: var xhr = new XMLHttpRequest();
  2. open request type
    ex:'GET', "");
  3. send "GET" request to server
    ex: xhr.send();
  4. register load event handler to hold JSON object if response has status code 200. ex: xhr.onload = function () {

for more info check here

Know about these:

  • Object literal notation
  • difference between primitive and non-primitive data types

Existing references:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download