JSON学习：关于一个JSON项目的改写

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>人物介绍</title>

    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

      <header>

      </header>

      <section>

      </section>

    <script>
    var header = document.querySelector('header');
    var section = document.querySelector('section');
    var requestURL = 'https://raw.githubusercontent.com/Jaehwanxi/secondpac/master/3.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['Name'];
 header.appendChild(myH1);

 var myPara = document.createElement('p');
 myPara.textContent = '地点: ' + jsonObj['site'] + ' // 拍摄于: ' + jsonObj['time'];
 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 = 'sex: ' + heroes[i].sex;
    myPara3.textContent = 'Superpowers:';

    var superPowers = heroes[i].specialPoint;
    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);
  }
}
    </script>
  </body>
</html>
css代码来自于：https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css
效果如图：
JSON学习：关于一个JSON项目的改写

猜你喜欢
