json

Posted 2021-01-22 liyifeng0528

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" : [
        "青春动漫",
        "热力全开"
      ]
    }
  ]
}