11th：JSON文件

通过Superhero改写的json文件。

{
  "members" : [
  {
    "continent" : "北美（2017首站）",
    "starttime" : "9.19",
    "endtime" : "10.14",
    "counts" : 13
  },
  {
    "continent" : "欧洲",
    "starttime" : "10.25",
    "endtime" : "11.10",
    "counts" : 10
  },
  {
    "continent" : "澳洲",
    "starttime" : "11.23",
    "endtime" : "11.30",
    "counts" : 3
  },
  {
    "continent" : "亚洲",
    "starttime" : "12.02",
    "endtime" : "12.08",
    "counts" : 3
  },
  {
    "continent" : "欧洲（2018首站）",
    "starttime" : "3.11",
    "endtime" : "4.16",
    "counts" : 21
  },
  {
    "continent" : "澳洲",
    "starttime" : "4.21",
    "endtime" : "4.28",
    "counts" : 4
  },
  {
    "continent" : "亚洲",
    "starttime" : "5.1",
    "endtime" : "5.12",
    "counts" : 6
  },
  {
    "continent" : "南美",
    "starttime" : "5.23",
    "endtime" : "6.2",
    "counts" : 6
  },
  {
    "continent" : "北美",
    "starttime" : "6.5",
    "endtime" : "4.14",
  "counts" : 23
  }
  ]
}

　　js部分用XHR接受json文件。

<section>

    </section>

    <script>

    var section = document.querySelector('section');
    var requestURL = 'https://raw.githubusercontent.com/ZoeyStyles/Superhero/master/Tour.json';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function() {
      var worldTour = request.response;
      showTour(worldTour);
    }

    function showTour(jsonObj) {
      var tour = jsonObj['members'];
        
    for(i = 0; i < tour.length ; i++) {
      var myArticle = document.createElement('article');
      var myPara1 = document.createElement('h3');
      var myPara2 = document.createElement('h3');
      var myPara3 = document.createElement('h3');
      var myPara4 = document.createElement('h3');
      var myList = document.createElement('ul');

      myPara1.textContent = '地区：' + tour[i].continent;
      myPara2.textContent = '始于：' + tour[i].starttime;
      myPara3.textContent = '止于：' + tour[i].endtime;
      myPara4.textContent = '场数：' + tour[i].counts;

      myArticle.appendChild(myPara1);
      myArticle.appendChild(myPara2);
      myArticle.appendChild(myPara3);
      myArticle.appendChild(myPara4);
      myArticle.appendChild(myList);

      section.appendChild(myArticle);
    }
  }
  </script>