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

Acerca de Moycas
Desarrollador web PHP, HTML, JS, CSS, Wordpress

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: