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