Populate Content From JSON Into HTML Elements - jQuery DJsonLoader

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

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>
  <label for="radios">Sex</label>
    <label for="radios-0">
      <input type="radio" name="sex" id="radios-0" value="M" >
    <label for="radios-1">
      <input type="radio" name="sex" id="radios-1" value="F" >
  <label for="checkboxes">Notify updates</label>
  <label for="checkboxes">
    <input type="checkbox" name="notify" value="true">


myData= {
  obs:"pending certification",

3. Or load JSON data from a remove data source.

  ajax: true,
  onError: function(result){
    alert('Error on load ajax data!');

4. Reset the plugin.


5. Available options.

  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.