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  How to get Full Path of Uploaded Image in Electron Application

 

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  Auto Resize Textarea When Typing - Auto-Resize.js

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  Simple jQuery Plugin for Displaying Twitter Feed - Tweetie

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

Social Media Video Downloader

Social Media Video Downloader Website


This will close in 20 seconds