Question

这是我第一次使用编程语言，所以我在编写问题时遇到了麻烦。希望这一次很清楚。

我获得了以下任务。

有一个数据对象存储在https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json。我应该从代码中删除链接，而是将该页面中包含的信息添加到代码中。另外，我需要在该列表中添加三个超级英雄。

如果您将完整版本存储在.html文件中并在网络浏览器中打开，您将看到网站的外观。我需要在该列表中再添加三个超级鞋。这是原始代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Our superheroes</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://mdn.github.io/learning-area/javascript/oojs/json/superheroes.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 (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 = 'Secret identity: ' + heroes[i].secretIdentity;
                myPara2.textContent = 'Age: ' + heroes[i].age;
                myPara3.textContent = 'Superpowers:';
                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);
            }
        }
    </script>
</body>

</html>

我尝试将信息存储在.json文件中并引用它，而不是在代码中提供链接。如果将完整代码存储在.html文件中，将第二个代码实例中的上述数据存储在名为squad.json的文件中，您将看到显示的唯一文本是“Hometown：”和“formed：”。甚至那条线也没有完整，因为它们列出了“未定义”而不是它们应该包含的值，“Metro City”和“2016”。这就是我完成的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Our superheroes</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 request = new XMLHttpRequest();
        request.open('GET', 'squad.json', true);
        request.onload = function() {
            var squad = JSON.parse(this.response);
            for (var i = 0; i < squad.length; i++) {
                console.log(squad[i].squadName + squad[i].homeTown + squad[i].formed + squad[i].secretBase + squad[i].active + squad[i].members);
            }
        }
        request.send();
        request.onload = function() {
            var superHeroes = request.response;
            populateHeader(superHeroes);
            showHeroes(superHeroes);
        }

        function populateHeader(squad) {
            var myH1 = document.createElement('h1');
            myH1.textContent = squad['squadName'];
            header.appendChild(myH1);
            var myPara = document.createElement('p');
            myPara.textContent = 'Hometown: ' + squad['homeTown'] + ' // Formed: ' + squad['formed'];
            header.appendChild(myPara);
        }

        function showHeroes(squad) {
            var heroes = squad['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 = 'Secret identity: ' + heroes[i].secretIdentity;
                myPara2.textContent = 'Age: ' + heroes[i].age;
                myPara3.textContent = 'Superpowers:';
                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);
            }
        }
    </script>
</body>

</html>

同样，任务是在不使用链接的情况下包含第二个代码实例中的文本。无论是来自.json文件还是直接进入代码。这是我培训的第一个主要任务。任何帮助或指导将不胜感激！

Answer 1

JSON数据可以直接用作javascript对象，因此，如果您允许将数据存储在代码中而不引用外部资源，那么这应该可以使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Our superheroes</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 superHeroes = {
  "squadName" : "Super hero squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name" : "Eternal Flame",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    },
    {
      "name" : "Eternal Flame 2",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
};
  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 (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 = 'Secret identity: ' + heroes[i].secretIdentity;
    myPara2.textContent = 'Age: ' + heroes[i].age;
    myPara3.textContent = 'Superpowers:';

    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);
  }
}
    </script>
  </body>
</html>

因此，而不是从外部资源请求数据

var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.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);
}

您可以将数据添加到代码

  var superHeroes = {
  "squadName" : "Super hero squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
...

然后可以像添加

一样添加新英雄

...
    {
      "name" : "Eternal Flame 2",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    },
...

如何在不使用链接的情况下从JSON文件获取数据？

1 个答案: