🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

jPut is a small jquey plugin which you can put your JSON as customized HTML format easily.It supports loading JSON via ajax and multi level json. Put your JSON to HTML easily by just two steps.Create jPut TemplateCall jPut function

jSON Plugins

Documentation

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

jQuery

Demo

Simple jPut Demo

One Dimensional Demo

Multi Dimensional Demo

Data Binding Demo

Load More with jPut

Todo App

Expression

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


You May Also Like