57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
let requestURL = './data.json';
|
|
let request = new XMLHttpRequest();
|
|
request.open('GET', requestURL);
|
|
request.responseType = 'json';
|
|
request.send();
|
|
|
|
request.onload = function() {
|
|
let superHeroes = request.response;
|
|
console.log(superHeroes);
|
|
|
|
|
|
const headerAnchor = document.getElementById('header');
|
|
|
|
var headerH1 = document.createElement('h1');
|
|
var headerP = document.createElement('p');
|
|
headerH1.textContent = superHeroes["SquadName"];
|
|
headerP.textContent = "Hometown : " + superHeroes["HomeTown"];
|
|
|
|
headerAnchor.appendChild(headerH1);
|
|
headerAnchor.appendChild(headerP);
|
|
|
|
const contentAnchor = document.getElementById('content');
|
|
|
|
for (let i = 0; i < 3; ++i) {
|
|
|
|
let article = document.createElement('article');
|
|
let h2 = document.createElement('h2');
|
|
let p = document.createElement('p');
|
|
let p2 = document.createElement('p');
|
|
let p3 = document.createElement('p');
|
|
let ul = document.createElement('ul');
|
|
|
|
article.classList.add('col-4');
|
|
h2.textContent = superHeroes["members"][i]["name"];
|
|
p.textContent = "Secret Identity : " + superHeroes["members"][i]["secretIdentity"];
|
|
p2.textContent = "Age : " + superHeroes["members"][i]["age"];
|
|
p3.textContent = "Powers :";
|
|
|
|
contentAnchor.appendChild(article);
|
|
article.appendChild(h2);
|
|
article.appendChild(p);
|
|
article.appendChild(p2);
|
|
article.appendChild(p3);
|
|
article.appendChild(ul);
|
|
|
|
superHeroes["members"][i]["powers"].forEach(power => {
|
|
let li = document.createElement('li');
|
|
li.textContent = power;
|
|
ul.appendChild(li);
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|