Obtener datos JSON desde Javascript

Obtener datos directamente desde un archivo JSON es una tarea que se ha convertido muy común en el desarrollo Web en estos días. Es por eso que comparto con ustedes un pequeño ejemplo en Javascript que realiza este intercambio de información:

Archivo JS:

var requestJSON = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

let request = new XMLHttpRequest();

request.open('GET', requestJSON);
request.responseType = 'json';
request.send();

request.onload = function() {
    let data = request.response;
    
    console.log('Squad Name: ' + data["squadName"] + '\nHome Town: ' + data["homeTown"] + '\nFormed: ' + data["formed"] + '\nSecret Base: ' + data["secretBase"]);

    let members = data.members;

    for (let i=0; i<members.length; i++) {
        console.log(members[i].name + '\n' + members[i].age + '\n' + members[i].secretIdentity + '\n');

        let powers = members[i].powers;

        for (let j=0; j<powers.length; j++) {
            console.log(' - ' + powers[j] + '\n');
        }
    }
} 

Como puedes observar para acceder a la información de la respuesta JSON se usan ambas notaciones: “Dot notation” y “Bracket notation”.

El output en la consola de tu navegador deberá ser como sigue:

Squad Name: Super hero squad
Home Town: Metro City
Formed: 2016
Secret Base: Super tower
Molecule Man
29
Dan Jukes
 - Radiation resistance
 - Turning tiny
 - Radiation blast
 
Madame Uppercut
39
Jane Wilson
 - Million tonne punch
 - Damage resistance
 - Superhuman reflexes

Eternal Flame
1000000
Unknown
 - Immortality
 - Heat Immunity
 - Inferno
 - Teleportation
 - Interdimensional travel
Anuncios

Asignar formato a la fecha del jQuery UI Datepicker

Para asignar el formato de fecha en el elemento detepicker lo haríamos de la siguiente forma desde javascript:

$(function() {
    $('#datepicker').datepicker({dateFormat:'yy-mm-dd'});
});

Para el ejemplo anterior estaríamos utilizando el formato ISO 8601 (2013-02-01), otros formatos a utilizar serian los siguientes de acuerdo a la documentación oficial de jQuery UI:

mm/dd/yy
yy-mm-dd
d M, y
d MM, y
DD, d MM, yy
'day' d 'of' MM 'in the year' yy

Obtener el valor de un grupo de Checkbox con jQuery

Supongamos que tenemos el un formulario HTML el cual contiene un grupo de checkbox y nuestro objetivo es identificar el valor de las opciones que se han seleccionado, con jQuery lo podemos resolver de la siguiente forma:

HTML

<input type="checkbox" name="categoria[]" value="0" />
<input type="checkbox" name="categoria[]" value="1" />
<input type="checkbox" name="categoria[]" value="2" />
<input type="checkbox" name="categoria[]" value="3" />
<input type="button" id="enviar" value="enviar" />

jQuery

$(function() {
    $('#enviar').click(function() {
        var categorias = new Array();

        $("input[@name='categoria[]']:checked").each(function() {
            categorias.push($(this).val());
        });

        alert(categorias);
    });
});

Debes incluir la librería de jQuery para que funcione correctamente.

Trim en Javascript

Función javascript que elimina espacios en blanco al inicio y al final de una cadena.


function trim(cadena) {
    return cadena.replace(/^\s+|\s+$/g,"");
}

A %d blogueros les gusta esto: