jPut - JSON to HTML
jPut is a small jQuey plugin where you can append your JSON to customized HTML format easily. You can also dynamically bind values to your existing data easily. Its simple and fast. The jPut can call by usind data attributes.
Features
- You can load JSON via AJAX
- It can supoprt multi dimensional JSON
- It support JSONP format
Version
2.0.1
Dependencies
Demo
Installation
You need to add jquery.js & jput2.js :
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jput.min.js"></script>Simple Example
In this simple example you have list of users as JSON. So you want to render all this as html. In this example you are using data attributes to call jPut.
Code
<ul jput="users" jput-jsondata='[{"name":"User 1"},{"name":"User 2"},{"name":"User 3"}]'>
<li>{{json.name}}</li>
</ul> In this example jput="users" attribute sets the entire div as jPut template for methord users. By putting this attribute the jPut will create a Object inside the variable jPut.jPut.users.
jput-jsondata='' is the attribute used to set your default data.If your default data is empty jPut wont render anything.
Databinding
For data binding we use {{ json.name }} expression. Since jPut is storing all values in JSON you have to user json.YOUR_VARIABLE_NAME
Simple Example 2 (Setting Data in JavaScript)
<script>
//on document ready
$(document).ready(function(){
//your variable with your users information
var users=[{"name":"User 1"},{"name":"User 2"},{"name":"User 3"}];
/*
* Binding your json to jPut
* jPut.<yourTemplateName>.data
*/
jPut.users.data=users;
});
</script>
<ul jput="users">
<li>{{json.name}}</li>
</ul> Template Properties
In jPut template you can give any kind of expressions and also you can call your own custom JavaScript functions.
ex :
<script>
function grade(mark)
{
if(mark>200)
return "A";
else if(mark>150)
return "B";
else
return "C";
}
</script>
<ul jput="users" jput-jsondata='[{"name":"User 1","total":180},{"name":"User 2","total":260}]'>
<li>Name : {{json.name}}</li>
<li>Total {{json.total}}</li>
<li>Percentage {{json.total/300}}</li>
<li>Grade {{grade(json.total)}}</li>
<li>Grade {{json.total>199?"PASS":"FAIL"}}</li>
</ul> jPut Options
//The div you want to upload
$('#main').jPut({
dataName:'', //object name if the json data is in specified object
jsonData:projects, //(jsonData/ajax_url) is required your json data to append/prepend
ajax_url:'http://yourdomain.com/data.json',//ajax:Specifies the URL to send the request to. Default is the current page
ajax_data:'', //ajax:specifies data to be sent to the server
ajax_type:'', //ajax:specifies the type of request. (GET or POST)
name:'template1', //*required field jput template name
limit:0, //default:0 limit the number of record to show
prepend:false, //default:false If you want to prepend data make it true. By default data will append
done:function(e){
//on success (e will be the json data)
},
error:function(msg){
alert('Error Message:'+msg); //On error
}
});To learn more go throught the examples.
License
MIT