Generate HTML page with JS from JSON
Templating example
I would suggest on of templating tools for example PURE...
The purpose of such a tool is separation of logic and representation.
For example, generating a list from JSON data using mentioned tool would look like this:
JSON data file
{'who':'BeeBole!'}HTML file
<html><head> <title>PURE Unobtrusive Rendering Engine</title> <script src="../libs/jquery.js"></script> <script src="../libs/pure.js"></script></head><body> <!-- the HTML template --> Hello <a class="who" href="#"></a> <script> // the JSON data we want to render $.getJSON('yourJSONdataFile.json', function(data) { // run the rendering $('a').autoRender(data); // PURE tries to match class with the JSON property and replace the node value with the value of the JSON property }); </script></body></html>This is most basic approach appropriate if you have simple JSON data (see working JSFiddle example there).. Get Started guide will walk you trough another example if basic approach isn't suitable. For more advanced features take look at the documentation.
Alternatives
There was no particular reason that PURE has been used in above example. You have many alternatives out there:
...or you can do it manually as explained there.
You can use a microtemplating library, like Mustache, to parse incoming JSON objects into HTML snippets using {{ key }} template syntax. If your object looks like:
var myObj = { name: 'Joe Smith', age: 25, features: { hairColor: 'red', eyeColor: 'blue' }};Using Mustache, you can render it into HTML easily using {{#}} and {{/}} to traverse nested objects:
Mustache.render('Hello, my name is {{name}} and I am {{age}} years old. {{#features}} I have {{hairColor}} hair and {{eyeColor}} eyes.{{/features}}', myObj);which outputs:
Hello, my name is Joe Smith and I am 25 years old. I have red hair and blue eyes.
EDIT: more germane application - dynamically generate a control panel using a template with nested lists of objects. Here's my template and object (HTML broken into a list and joined for clarity):
var panel = [ '<div id="cpanel">', '{{#cpanel}}', '<div class="panel_section">', '<h1 class="cpanel">{{name}}</h1>', '<p>', '{{#content}}', '<button id="{{id}}">{{id}}</button>', '{{/content}}', '</p>', '</div>', '{{/cpanel}}', '</div>',].join('\n');var panelObj = { cpanel: [ { name: 'playback', content: [ {id: 'play'}, {id: 'pause'}, {id: 'stop'} ] }, { name: 'zoom', content: [ {id: 'zoomIn'}, {id: 'zoomOut'} ] }]};Then you render with Mustache:
Mustache.render(panel, panelObj);which outputs:
<div id="cpanel"> <div class="panel_section"> <h1 class="cpanel">playback</h1> <p> <button id="play">play</button> <button id="pause">pause</button> <button id="stop">stop</button> </p> </div> <div class="panel_section"> <h1 class="cpanel">zoom</h1> <p> <button id="zoomIn">zoomIn</button> <button id="zoomOut">zoomOut</button> </p> </div></div>