JSONML example

jsonml_example.js

var U = require('./underscore-min.js');
var sanitize = require('validator').sanitize;

var doc = 
["form", {"class":"form-horizontal span6"},
  ["fieldset",{},
    ["legend","Payment"],
    ["div", {"class":"control-group"},
      ["label", {"class":"control-label"}, "Card Holder's Name"],
      ["div", {"class":"controls"},
        ["input", {"type":"text","class":"input-block-level", "pattern":"\\w+ \\w+.*","title":"Fill your first and last name", "required":"true"}]
      ]
    ],
    ["div", {"class":"control-group"},
      ["label", {"class":"control-label"}, "Card Number"],
      ["div", {"class":"controls"},
        ["div", {"class":"row-fluid"},
          ["div", {"class":"span3"},
            ["input", {"type":"text","class":"input-block-level","autocomplete":"off","maxlength":"4","pattern":"\\d{4}","title":"First four digits","required":"true"} ]
          ],
          ["div", {"class":"span3"},
            ["input", {"type":"text","class":"input-block-level","autocomplete":"off","maxlength":"4","pattern":"\\d{4}","title":"Second four digits","required":"true"} ]
          ],
          ["div", {"class":"span3"},
            ["input", {"type":"text","class":"input-block-level","autocomplete":"off","maxlength":"4","pattern":"\\d{4}","title":"Third four digits","required":"true"} ]
          ],
          ["div", {"class":"span3"},
            ["input", {"type":"text","class":"input-block-level","autocomplete":"off","maxlength":"4","pattern":"\\d{4}","title":"Fourth four digits","required":"true"} ]
          ]
        ]
      ]
    ],
    ["div", {"class":"control-group"},
      ["label", {"class":"control-label", "alt":"test encoding\""},"Card Expiry Date, test <>"],
      ["div", {"class":"controls"},
        ["div", {"class":"row-fluid"},
          ["div", {"class":"span9"},
            ["select", {"class":"input-block-level"},
              ["option", {"value":"January"}, "January"],
              ["option", {"value":"February"}, "February"],
              ["option", {"value":"Match"}, "March"]
            ]
          ],
          ["div", {"class":"span3"},
            ["select",{"class":"input-block-level"},
              ["option",{"value":2013},2013],
              ["option",{"value":2014},2014],
              ["option",{"value":2015},2015]
            ]
          ]
        ]
      ]
    ],
    ["div", {"class":"control-group"},
      ["label", {"class":"control-label"}, "Card CVV"],
      ["div", {"class":"controls"},
        ["div", {"class":"row-fluid"},
          ["div", {"class":"span3"},
            ["input", {"type":"text","class":"input-block-level","autocomplete":"off","maxlength":"3","pattern":"\\d{3}","title":"Three digits at back of your card", "required":"true"}]
          ],
          ["div", {"class":"span8"}
          ]
        ]
      ]
    ],
    ["div", {"class":"form-actions"},
      ["button", {"type":"submit","class":"btn btn-primary"}, "Submit"],
      ["button", {"type":"button","class":"btn"}, "Cancel" ]
    ]
  ]
];

//console.log(JSON.stringify(doc));
console.log(jsonml2html(doc));

function getType(val) {
  if ( typeof val === 'undefined' ) return 'undefined';
  if ( typeof val === 'object' && !val) return 'null';
  if ( val === false ) return false;
  if ( val === true ) return true;
  return ({}).toString.call(val).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
}

function jsonml2html(node) {
  var nodeType = getType(node);

  if ( nodeType == 'object' ) throw 'objects not supported';

  var str = '';
   
  if ( nodeType == 'array' ) {
    var el = node[0];
    var attrs = node.length > 1 && getType(node[1]) == 'object' ? node[1] : {};
    var children = node.length > 1 && getType(node[1]) != 'object' ? node.slice(1) : node.slice(2);

    str += '<' + el;
    for ( key in attrs ) {
      str += " " + key + '="' + sanitize(attrs[key]).escape() + '"';
    }
    str += '>';
    for ( var ci = 0; ci < children.length; ci++ ) {
      str += jsonml2html(children[ci]); 
    }
    str += '</' + el + '>';
  } else {
    str += nodeType == 'null' || nodeType == 'undefined' ? nodeType : sanitize(node.toString()).entityEncode();
  }
  return str;
}