将XMLrequest 改写成fetch

 

var header = document.querySelector('header');
var section = document.querySelector('section');

fetch('https://raw.githubusercontent.com/gmhcy/ONEPIECE/master/onepiece.json')

.then(function(response)

{ return response.json();

})

.then(function(myJson) {

var onepiece = myJson;

onepieceHeader(onepiece);
showpeople(onepiece);

});

 

function onepieceHeader(jsonObj){
var headline=document.createElement('h1');
headline.textContent=jsonObj['tou'];
header.appendChild(headline);
var jies=document.createElement('p');
jies.textContent=jsonObj['jieshao'];
header.appendChild(jies);
}
function showpeople(jsonObj){
var heroes=jsonObj['members'];
for (var 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 myPara4 = document.createElement('p');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'age: ' + heroes[i].age;
myPara2.textContent = 'power: ' + heroes[i].power;
myPara3.textContent = 'hobby:'+heroes[i].hobby;
myPara4.textContent = 'dream:'+heroes[i].dream;
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myPara4);
section.appendChild(myArticle);
}
}