js:
var requestURL = ‘https://raw.githubusercontent.com/liyifeng0528/sert/master/rrrrttt.json‘;
var request = new XMLHttpRequest();
request.open(‘GET‘, requestURL);
request.responseType = ‘json‘;
request.send();
request.onload = function() {
var superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement(‘h1‘);
myH1.textContent = jsonObj[‘squadName‘];
header.appendChild(myH1);
var myPara = document.createElement(‘p‘);
myPara.textContent = ‘Hometown: ‘ + jsonObj[‘homeTown‘] + ‘ // Formed: ‘ + jsonObj[‘formed‘];
header.appendChild(myPara);
}
function showHeroes(jsonObj) {
var heroes = jsonObj[‘members‘];
for(i = 0; i < heroes.length; i++) {
var myArticle = document.createElement(‘article‘);
var myH2 = document.createElement(‘h2‘);
var myPara1 = document.createElement(‘p‘);
var myPara2 = document.createElement(‘p‘);
var myPara3 = document.createElement(‘p‘);
var myList = document.createElement(‘ul‘);
myH2.textContent = heroes[i].name;
myPara1.textContent = ‘Secret identity: ‘ + heroes[i].secretIdentity;
myPara2.textContent = ‘Age: ‘ + heroes[i].age;
myPara3.textContent = ‘Superpowers:‘;
var superPowers = heroes[i].powers;
for(j = 0; j < superPowers.length; j++) {
var listItem = document.createElement(‘li‘);
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
数据：
{ ?"squadName" : "电视大全", ?"出品人" : "石", ?"出品时间" : 2018, ?"secretBase" : "Super tower", ?"active" : true, ?"members" : [ ???{ ?????"name" : "电视剧", ?????"种类" : 8, ?????"powers" : [ ???????"最近最火电视剧", ???????"众星云集" ?????] ???}, ???{ ?????"name" : "综艺", ?????"种类" : 5, ?????"secretIdentity" : "Jane Wilson", ?????"powers" : [ ???????"热门综艺", ???????"笑料百出" ?????] ???}, ???{ ?????"name" : "电影", ?????"种类" : 6, ?????"secretIdentity" : "Unknown", ?????"powers" : [ ???????"票房电影", ???????"精彩纷呈" ?????] ???}, ???{ ?????"name" : "动漫", ?????"种类" : 5, ?????"secretIdentity" : "Unknown", ?????"powers" : [ ???????"青春动漫", ???????"热力全开" ?????] ???} ?]}json
原文地址：https://www.cnblogs.com/liyifeng0528/p/10009253.html