JSON

son代码：

{
  "squadName" : "WORLD CUP",
  "The Sponsor" : "Rio",
  "data" : 2017,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Personal racing",
      "countDown" : "10",
      "feature" : "gas collection",
      "powers" : [
        "drifting",
        "gas escape",
        "strike"
      ]
    },
    {
     "name" : "team racing",
      "countDown" : "10",
      "feature" : "blue gas collection",
      "powers" : [
        "temp helps",
        "common victory",
        "havae a sense of unity"
      ]
    },
    {
      "name" : "Encounter racing",
      "countDown" : "10",
      "feature" : "Transmission and Acceleration",
      "powers" : [
        "talk with opposite sex",
        "make frieds",
        "may get married"
      ]
    }
  ]
}
js代码：

var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://raw.githubusercontent.com/qwe13404033685/qwwert/master/yuan.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 = 'The publishing company:' + jsonObj['The publishing company'] + ' data: ' + jsonObj['data'];
  header.appendChild(myPara);
}
function showHeroes(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 myList = document.createElement('ul');

    myH2.textContent = heroes[i].name;
    myPara1.textContent = 'feature: ' + heroes[i].feature;
    myPara2.textContent = 'count down: ' + heroes[i].countDown;
    myPara3.textContent = 'The racing way';
        
    var superPowers = heroes[i].powers;
    for (var 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);
  }
}

转载于:https://www.cnblogs.com/lqlqxiong/p/9979602.html