jPut - JSON to HTML
jPut is a small jQuery 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.2
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] (NOTE: jPut variable is created inside the jQuery plugin. So please avoide to use jPut variable in your code).
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. jPut expressions are written inside double braces: {{ expression }}. You can also use different expression if you have conflict with any other plugin or framework.{[ expression ]} For this you have to set you expression as "exp2".
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
