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

DjsonLoader - Cargador HTML de datos JSON

DESCRIPCION

DJsonLoader es un plugin de jquery para la carga de datos obtenidos en formato JSON no solo en formularios, sino también en cualquier otro contenedor  HTML (div, nav, section, article, etc), además los datos se pueden cargar en cualquier campo de formulario u otras etiquetas HTML(a, img, p, span, iframe, etc), de forma sencilla, rápida y flexible.

Cuenta con otras características como:

• ·         Se pueden cargar datos de objetos embebidos dentro de otros y arrays simples.
• ·         Realizar reset de formularios y otros contenedores HTML.
• ·         Se pueden cargar opciones a las etiquetas select a partir de arrays simples o de objetos con múltiples opciones configurables.
• ·         Se pueden cargar todo tipo de etiquetas como los src de img, iframe, etc. o href para los links.
• ·         Se pueden cargar elementos de listas (ol, ul) a partir de arrays simples.
• ·         Se pueden cargar tanto objetos JSON como Strings con formato JSON.
• ·         Los datos se cargan donde la variable coincida con el atributo name (para campos de formulario), class para cualquier etiqueta o el atributo data-djload de manera general.

DESCARGA

Con NPM:   npm install djsonloader
Con Bower: bower install DJsonLoader --save
Descarga directa en zip

API

Uso del plugin:

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

Se invoca sobre formularios, campos select o cualquier otro contenedor html (div, nav, section, article, etc.) como función a ser llamada cuando se necesite, tiene las siguientes funciones: cargar datos JSON en su contenedor, cargar opciones de un select, hacer reset de los datos de su contenedor y modificar los  parámetros por defecto.

Parámetro	tipo	Descripción
json	Json object, array, string	·     Si se especifica un objeto json o un string con formato json, se utilizan los datos que contienen para cargar el contenedor sobre el que se aplica el plugin, el objeto puede contener otros objetos y arrays simples. ·     Cuando se aplica sobre un select, este parámetro debe ser un array o un string con formato de array, con los datos a utilizar para cargar el select. ·     Se coloca el valor ‘reset’, para que se haga reset del contenedor sobre el que se aplica el plugin. ·     Se colocar el valor ‘options’, para modificar de forma global los parámetros del plugin, reemplazándolos con los pasados en el parámetro [options].
options	Json object	Opcional, un objeto con los parámetros del plugin (especificados en la tabla de opciones).

Ejemplos:

Carga de un formulario, obteniendo datos json mediante Ajax u otros medios:

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

Carga de un formulario, especificando una función que se ejecuta al finalizar la carga de datos:

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

                           onLoad:function($container){

                                  $container.find('select').

trigger('chosen:updated');

                           }

                    });

Carga de un formulario, haciendo reset de los datos antes de cargar:

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

                           Reset:true,

                           }

                    });

Ejemplo de datos json utilizados:

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

                           }

                    };

Carga de las opciones de un select, mediante datos de un 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'

       });

Opciones disponibles:

Opción	Tipo	Descripción	Ejemplo
onLoad	function	Función del usuario a ejecutar cuando se terminan de cargar los datos, para realizar operaciones adicionales.	onLoad:function($container){   console.log(‘load success’); }
onReset	function	Función del usuario a ejecutar cuando se termina el reset de los datos, para realizar operaciones adicionales.	onReset:function($container){   console.log(‘reset success’); }
reset	boolean	Indica si se debe hacer reset antes de cargar los datos, por defecto es false.	reset: true reset false
resetchar	string	String a utilizar para hacer reset en las etiquetas que no sean de formulario (p, span, b, h1, etc.), por defecto es una cadena vacía.	resetchar: ‘*’ resetchar: ‘-’ resetchar: ‘…’
slabel	string	Utilizado cuando se carga un select con un array de objetos, es el nombre del atributo a utilizar como etiqueta (option).	slabel:'name'
svalue	string	Utilizado cuando se carga un select con un array de objetos, es el nombre del atributo a utilizar como valor de los option.	svalue:'id'
sselected	string	Utilizado cuando se carga un select con un array de objetos, es el nombre del atributo a utilizar para determinar si la option debe estar seleccionada (selected).	sselected:'last'
sempty	boolean	Utilizado cuando se carga un select, indica si se debe crear una opción adicional vacía por defecto.	sempty:true
selabel	string	Utilizado cuando se carga un select, si sempty es true, es la etiqueta que debe mostrar la opción vacía creada (por defecto: ‘select an option...’).	sempty:'select a fruit'
sevalue	string	Utilizado cuando se carga un select, si sempty es true, es el valor que debe tener la opción vacía creada (por defecto una cadena vacía).	sempty:0

Como se cargan los datos:

Etiquetas HMTL	Atributo o propiedad modificada	Tipo de valor esperado
Input de tipo radio o checkbox	checked	Cualquier tipo excepto object
Input (excepto de tipos radio o checkbox) Textarea Select	value	Para select multiple: Array de tipos básicos. Para el resto cualquier tipo excepto object
a	href	string
Img Iframe	src	string
Ul Ol	Genera elementos li y agrega el html.	Array de tipos básicos.
Resto de etiquetas HTML	html	Cualquier tipo excepto object