json

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" : [
        "青春动漫",
        "热力全开"
      ]
    }
  ]
}
posted on 2018-11-23 18:48  李易峰0528  阅读(105)  评论(0编辑  收藏  举报