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>
  </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.