inwebdeveloper

Are you confused how to convert JSON to HTML? I found some tools to enable you to convert it.

As you will see below, it’s pretty easy to render a HTML table from a object array using plain JavaScript. Since most results are in a Table or Detail layout, I created 2 functions to return the data in either format. I also added some optional parameters that you can set to control formatting.

1. Convert JSON to HTML using JavaScript

/************************************************/
/* Build a Dynamic HTML table from JSON results */
/* By: Zachary Hunter */
/* On: April 1, 2010 */
/************************************************/

function CreateTableView(objArray, theme, enableHeader) {
// set optional theme parameter
if (theme === undefined) {
theme = 'mediumTable'; //default theme
}

if (enableHeader === undefined) {
enableHeader = true; //default enable headers
}

var array = JSON.parse(objArray);

var str = '

';

// table head
if (enableHeader) {
str += '

';
for (var index in array[0]) {
str += '

';
}
str += '

';
}

// table body
str += '

';
for (var i = 0; i < array.length; i++) {
str += (i % 2 == 0) ? '
' : '
';
for (var index in array[i]) {
str += '

';
}
str += '

';
}
str += '

'
str += '

' + index + '
' + array[i][index] + '

';
return str;
}

function CreateDetailView(objArray, theme, enableHeader) {
// set optional theme parameter
if (theme === undefined) {
theme = 'mediumTable'; //default theme
}

if (enableHeader === undefined) {
enableHeader = true; //default enable headers
}

var array = JSON.parse(objArray);

var str = '

';
str += '
';

for (var i = 0; i < array.length; i++) {
var row = 0;
for (var index in array[i]) {
str += (row % 2 == 0) ? '

' : '
';

if (enableHeader) {
str += '

';
}

str += '

';
str += '

';
row++;
}
}
str += '

'
str += '

' + index + '	' + array[i][index] + '

';
return str;
}


Source : http://www.zachhunter.com/2010/04/json-objects-to-html-table/

2. JSON2HTML

JSON2HTML is a simple but powerful free jQuery plug-in used to transform JSON to HTML.

Website : http://www.json2html.com/

3. JSON 2 HTML

This page offers an easy way to visualize a string of JSON text. Put some JSON into the text area, and this page will instantly display the text as a set of nested boxes, corresponding to the objects, arrays and values in the JSON string.
You can also paste a URL into the textarea, and the JSON string will be loaded from the URL.

Website: http://json.bloople.net/

4. HTML5 JSON Report format

Online HTML5 JSON Report format to view any JSON data in a human-readable HTML view

Website : http://ajaxstack.com/jsonreport/