文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在不使用链接的情况下从JSON文件获取数据？

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

Stack Overflow用户

提问于 2017-12-01 08:24:53

回答 1查看 421关注 0票数 0

这是我第一次使用编程语言，所以我在提出这个问题时遇到了困难。希望这次很清楚。

我被分配了以下任务。

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

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

<!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的文件中，那么您将看到唯一显示的文本是“file：”和"formed:“。即使是这一行也不完整，因为它们列出了“未定义”，而不是它们应该包含的值，相应地，“大都会城”和"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文件还是直接进入代码。这是我训练的第一个主要任务。任何帮助或指导都将不胜感激！

javascript

json

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-01 08:32:02

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"
      ]
    },
...

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47589294

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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