Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Generate HTML page with JS from JSON

I'm looking for a very basic example of using Javascript to parse a JSON file and output an html file or populate an html file. All the examples I've located so far have code snippets and I don't have the background to fill in the blanks between.

Thank you for any fiddles (which would be awesome), links, and smart a*s comments.

like image 687
rd42 Avatar asked Mar 08 '12 21:03

rd42


3 Answers

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. There are many other alternatives out there:

  • EJS
  • Mustache
  • Tempo
  • ...

...or you can do it manually as explained there.

like image 137
PrimosK Avatar answered Sep 20 '22 16:09

PrimosK


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>
like image 32
david Avatar answered Sep 20 '22 16:09

david


You might want to look at jQuery.dForm. It helps creating HTML and forms dynamically using JSON.

like image 27
Sasi Avatar answered Sep 18 '22 16:09

Sasi