Populate Content From JSON Into HTML Elements - jQuery DJsonLoader
File Size: | 21 KB |
---|---|
Views Total: | 91 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A powerful tool for mapping JSON to web elements.
DJsonLoader is a flexible, feature-rich jQuery plugin that enables you to swiftly populate complex data and objects from JSON, JS objects, JS arrays, and JS strings into the DOM.
Key Features:
- AJAX Support
- Nested Data Loading
- Customizable Options
- Versatile Tag Support: form, list, img, iframe, a, p, span, and more.
- And much more.
How to use it:
1. To get started, load both the jQuery library and DJsonLoader.js script in the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/DJsonLoader.js"></script>
2. Populate an element with the data you provide:
<form id="form"> <label for="textarea">First name</label> <input name="firstname" type="text"> <label for="last">Last name</label> <input name="lastname" type="text"> <label for="select">Role</label> <select name="accessdata.idrole"> <option value="1">Admin</option> <option value="2">Seller</option> <option value="3">Systems</option> </select> <label for="radios">Sex</label> <label for="radios-0"> <input type="radio" name="sex" id="radios-0" value="M" > Male </label> <label for="radios-1"> <input type="radio" name="sex" id="radios-1" value="F" > Female </label> <label for="checkboxes">Notify updates</label> <label for="checkboxes"> <input type="checkbox" name="notify" value="true"> </label> ... </form>
myData= { firstname:"David", lastname:"Jerez", notify:true, obs:"pending certification", accessdata:{ firstname:"Other", login:"admin", password:"123", idrole:3 } };
$("#form").djload(user);
3. Or load JSON data from a remove data source.
$('#form').djload({},{ ajax: true, url:'/path/to/data/', onError: function(result){ alert('Error on load ajax data!'); } });
4. Reset the plugin.
$('#form').djload('reset');
5. Available options.
$('#form').djload(data,{ reset: false, imgPrefix: '', resetString: '', slabel: '', svalue: '', sselected: '', sempty: false, selabel: 'select an option...', sevalue: '', Adata: [], ajax: false, url: '', data: {}, method: 'post', // callbacks onLoad: function(){}, onReset: function(){}, onError: function(){} });
This awesome jQuery plugin is developed by esneyderg357. For more Advanced Usages, please check the demo page or visit the official website.