How to Transform JSON Objects into HTML Using json2html.js – Coding Shiksha

How to Transform JSON Objects into HTML Using json2html.js – Coding Shiksha

Welcome folks today I am back with a another blog post so in this blog post we will be looking at a powerful JavaScript library which allows you to transform JSON objects into HTML language

You can visit the official website of this library at this link after visiting the website you can read the documentation all the methods are there but now this blog post we will be looking at the real world example where we will be converting the JSON into HTML we will be creating some object from JSON and then we will be creating that JSON objects into HTML

Example

 

Transform (template)

 

var transform = 
 {"<>": "li", "id":"${id}", "html":[
	{"<>": "span", "text": "${name} (${year})"}
  ]};

Plus JSON Data

READ  Build a Webcam Filter Picture App with Webrtc & Canvas

 

var data = 
 {"id": 1123, "name": "Jack and Jill", "year":2001};

Will render the following html

 

<li id="1123">
	<span>Jack and Jill (2001)</span>
</li>

Using with jQuery

 

You can also use this library with jQuery so it is very simple to use this library so just copy below code to start working with jQuery

 

var transform = 
 {"<>":"li","id":"${id}","html":[
	{"<>":"span","html":"${name} ${year}"}
  ],"onclick":funciton(e){
	alert("You just clicked " + e.obj.name);
  }};

 

<li id=1123>
	<span>Jack and Jill (2001)</span>
</li>

 

READ  BootBoxJS - Bootstrap Modals Library For Creating Beautiful Bootstrap Modals

Installing By Node

 

npm install node-json2html

var json2html = require('node-json2html');

	var data = [{'male':'Bob','female':'Jane'},{'male':'Rick','female':'Ann'}];

	var transform = {"<>":"div","html":"${male} likes ${female}"};
        
	var html = json2html.transform(data,transform);

 

Short Hand Notation

 

var transform = {'<>':'div','text':'${name} (${age})'};
    
var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];
    
document.write( json2html.transform(data,transform) );

 

Inline Function

var transform = {'<>':'div','class':function(){if(this.score < 10) return('red');},'html':'${company}'};
 
var data = [{'company':'ABC Corp.','score':15},
            {'company':'XYZ Inc.','score':9},
            {'company':'PBB Org.','score':35},
            {'company':'CBA Ltd.','score':5}];
            
document.write( json2html.transform({},transform) );

 

Nested Transform

 

var transforms = {
    'item':{'<>':'li','text':'${name} (${age})'},
    'list':{'<>':'ul','html':function(){
        return( json2html.transform(data,transforms.item) );    
    }},
    
var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];
    
document.write( json2html.transform({},transforms.list) );

 

jQuery Selectors

var transform = {'<>':'li','text':'${name} (${age})'};
    
var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];
    
$('ul').json2html( data,transform );

 

READ  How to Design Facebook Login Page in HTML and CSS - Full Source Code

Events

 

var transform = {"<>":"div","class":"row","html":[
                    {"<>":"div","class":"col-sm box ${colour}","text":"${click}","onclick":function(){
                        $(this).css("visibility","hidden");
                    }},
                    {"<>":"div","class":"col-sm box ${colour}","text":"${dblclick}","ondblclick":function(){
                        $(this).css("visibility","hidden");
                    }}
                ]};
    
var data = [
        {"click":"click me","dblclick":"dbl click me","colour":"red"},
        {"click":"click me harder","dblclick":"dbl click me now","colour":"blue"}
    ];
    
$('#example-jquery-events-output').json2html( data,transform );

 

Real World App

 

var transforms = {
    "list":{"<>":"ul","html":function(){
        return($.json2html(data,transforms.items));   
    }},
    
    "items":{"<>":"li","html":function(obj,index){
                return( (index+1) + ". " + obj.title);
            },"onclick":function(e){
        $("#example-jquery-app-output .details").empty().json2html(e.obj,transforms.details);
    }},
    
    "details":[
        {"<>":"div","html":[
            {"<>":"h5","text":"${title}"}
        ]},
        {"<>":"div","text":"Year: ${year}"},
        {"<>":"div","text":"Rating: ${rating}"},
    ]
};
                
var data = [
    {"title":"The Shawshank Redemption","year":"1994","rating":"9.2"},
    {"title":"The Godfather","year":"1972","rating":"9.2"},
    {"title":"The Godfather: Part II","year":"1974","rating":"9.0"},
    {"title":"The Dark Knight ","year":"2008","rating":"9.0"},
    {"title":"12 Angry Men","year":"1957","rating":"9.0"}
];
 
$("#example-jquery-app-output .list").json2html({},transforms.list);

 

Node.js Require

 

var json2html = require('node-json2html');
 
var transform = {'<>':'div','text':'${name} (${age})'};
    
var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];
    
var html = json2html.transform(data,transform);

Leave a Reply

Close Menu