The Bigger Picture

So, you may still be sitting here and wondering what the practical use of jsonHTML really is, why compile down to HTML, when you can just write it by hand? You must remember, javaScript has some powerful tools, that are contained in every programming language and one of the most powerful are loops. What??? Your wondering why loops are so awesome??? If you must ask, I will explain!

First of all, lets say you have a database full of data. When you pulled data from it, you got an array of objects with properties. For each row that was in the database (or object if using mongoDB), you need a div element to allow your users to view that data. In order to display this data, traditionally we would have to write out each div statically, but since we do not know how much data is going to come to us, one would write templates, as strings... by hand... yes... tedious. This is the reason jsonHTML was created, we could simply use its tools to produce for us a bunch of div objects, and append that object to the DOM on every loop.

For the sake of simplicity of this example, lets say the data which came back from your database is already in JSON format:

//the data which came back from the database.
var dbData = [ 
    {
        Name: 'jaunty',
        Description: 'jaunty loves apples!',
    }, 
    {
        Name: 'bob',
        Description: 'Likes to skateboard',
    },
    {
        Name: 'joseph',
        Description: 'Likes to watch movies',
    }
];

Now, lets say we want to reflect that data, each object as an individual div on the DOM:

//I need to loop through the returned data from the database:
$.each(dbData, function(indx, data) {
    //I believe I want the description to be in it's own div in an html paragraph, this will be a child object.
    var childDescript = $jConstruct('div', {
        text: data.Description,
    }).textProperties('paragraph').css({
        'margin': '0 auto', //I want it to be centered in the parent div.
    });

    //now I need to create the parent Div that will hold the 'Name.'
    $jConstruct('div', {
        class: 'defaultClass',
        text: data.Name,
    }).css({
        'text-align': 'center',
        'border': '1px solid black',
        'border-radius': '15px', //I want the border to look pretty!
    }).addChild(childDescript).appendTo('body'); //add the child object and append it to the root div of the DOM.
});

Here is what the code should look like between your script tags:

//the data which came back from the database.
var dbData = [ 
    {
        Name: 'jaunty',
        Description: 'jaunty loves apples!',
    }, 
    {
        Name: 'bob',
        Description: 'Likes to skateboard',
    },
    {
        Name: 'joseph',
        Description: 'Likes to watch movies',
    }
];

//you have to wrap it in a .ready in order for the browser to know when to begin executing.
$(document).ready(function() {
    //I need to loop through the returned data from the database:
    $.each(dbData, function(indx, data) {
        //I believe I want the description to be in it's own div in an html paragraph, this will be a child object.
        var childDescript = $jConstruct('div', {
            text: data.Description,
        }).textProperties('paragraph').css({
            'margin': '0 auto', //I want it to be centered in the parent div.
        });

        //now I need to create the parent Div that will hold the 'Name.'
        $jConstruct('div', {
            class: 'defaultClass',
            text: data.Name,
        }).css({
            'color': 'purple', //purple is such a nice color... don't you agree?
            'text-align': 'center',
            'border': '1px solid black',
            'border-radius': '15px', //I want the border to look pretty!
        }).addChild(childDescript).appendTo('body'); //add the child object and append it to the root div of the DOM.
    });
});     

Now it may be possible to make strings that reflect HTML, and append on the strings, depending on the data coming in, but as you can see, if your entire web application is database driven, it would take an eternity to produce a good quality flexible user environment.

One thing to remember here, is that setting the css manually for each div, is optional, you can define a class name for your jsonHTML object, or an ID, and implement styling in an external style sheet, just like you would if you were writing native html. In the above example, even though it currently does nothing, I set the parentNameObj class to "defaultClass," a css style can be added and when this object is rendered on the DOM, the browser will automatically implement the styling. It is also good to remember that jsonHTML does technically require that each object have an id, if you do not define an id, jsonHTML will come up with a random set of characters and make a generic ID for you, but if you ever want to call on this object again with jQuery, your going to have to come up with a unique ID. It is recommended in very large projects to define a unique id to each object, but jsonHTML will do the best it can to provide the most unique ID possible.