DjsonLoader - JSON data HTML loader

DESCRIPTION

DJsonLoader is a jquery plugin for loading data in JSON format not only in forms but also in any other HTML container (div, nav, section, article, etc), in addition the data can be loaded in any form field Or other HTML tags (a, img, p, span, iframe, etc.), simply, quickly and flexibly.

It has other features like:

• You can load data from embedded objects into other and simple arrays.
• Reset forms and other HTML containers.
• Options can be loaded to select tags from simple arrays or objects with multiple configurable options.
• You can load all kinds of tags like the src of img, iframe, etc. Or href for links.
• List elements (ol, ul) can be loaded from simple arrays.
• Both JSON objects and JSON-formatted strings can be loaded.
• The data is loaded where the variable matches the name attribute (for form fields), class for any tag or the data-djload attribute in general.

DOWNLOAD:

Whit NPM:   npm install djsonloader
Whit Bower: bower install DJsonLoader --save
Direct download (zip)

API

Using the plugin:

              $(container).djload(json,options);

It is invoked on forms, select fields or any other html container (div, nav, section, article, etc.) as a function to be called when needed, it has the following functions: load JSON data in its container, load options from a select , Reset the data of its container and modify the default parameters.

Parameter	Type	Description
json	Json object, array, string	If you specify a json object or a string with json format, the data that is used to load the container on which the plugin is applied, the object can contain other objects and simple arrays. When applied over a select, this parameter must be an array or an array formatted string, with the data to be used to load the select. The value 'reset' is placed, so that the container on which the plugin is applied is reset. Place the value 'options', to modify the parameters of the plugin globally, replacing them with the passwords in the [options] parameter.
options	Json object	Optional, an object with the plugin parameters (specified in the options table).

Examples:

Loading a form, obtaining json data using Ajax or other means:

$("#myform").djload(data);

Loading a form, specifying a function that is executed at the end of data loading:

$("#myform").djload(data,{

                           onLoad:function($container){

                                  $container.find('select').

trigger('chosen:updated');

                           }

                    });

Loading a form, resetting the data before loading:

$("#myform").djload(data,{

                           Reset:true,

                           }

                    });

Example of valid json data:

data= {

                           firstname:"David",

                           lastname:"Jerez",

                           age:25,

                           sex:"M",

                           notify:true,

                           obs:"pending certification",

                           languages:[1,4,6],

                           lastpost:"DJsonLoader!",

                           accessdata:{

                                  login:"admin",

                                  password:"123",

                                  idrole:3

                           }

                    };

Load the options of a select, using data from an array:

             //simple

       var levels='["A","B","C","D"]';

$("#levels").djload(levels);

//object

       var fruits=[{id:1,name:"banana",last:false},

                    {id:2,name:"pineapple",last:true},

                    {id:3,name:"lemon",last:false}];

       $("#fruits").djload(fruits,{

             slabel:'name',

             svalue:'id',

             sselected:'last'

       });

Available options:

Option	Type	Description	Example
onLoad	function	Function of the user to execute when the data is finished loading, to perform additional operations.	onLoad:function($container){   console.log(‘load success’); }
onReset	function	Function of the user to execute when the data reset is completed, to perform additional operations.	onReset:function($container){   console.log(‘reset success’); }
reset	boolean	Indicates whether to reset before loading data, default is false.	reset: true reset false
resetchar	string	String to be used to reset non-form tags (p, span, b, h1, etc.), by default is an empty string.	resetchar: ‘*’ resetchar: ‘-’ resetchar: ‘…’
slabel	string	Used when loading a select with an array of objects, is the name of the attribute to be used as a label (option).	slabel:'name'
svalue	string	Used when a select is loaded with an array of objects, it is the name of the attribute to be used as the value of the options.	svalue:'id'
sselected	string	Used when loading a select with an array of objects, it is the name of the attribute to use to determine if the option must be selected.	sselected:'last'
sempty	boolean	Used when a select is loaded, it indicates whether to create an empty additional default option.	sempty:true
selabel	string	Used when loading a select, if sempty is true, it is the label that should display the empty option created (default: 'select an option ...').	sempty:'select a fruit'
sevalue	string	Used when a select is loaded, if sempty is true, it is the value that the empty option must have created (by default an empty string).	sempty:0

How data is loaded:

HMTL tag	Modified attributte or property	Type of data expected
Radio o checkbox input type	checked	Any type except object
Input (except radio or checkbox) Textarea Select	value	For select multiple: array of basic types. For the rest any type except object
a	href	string
Img Iframe	src	string
Ul Ol	Generates li elements and add the html.	Array of basic types
Rest of HTML tags	html	Any type except object