JavaScript---------JSON实例

顶层函数的代码如下所示：

async function populate() {
  const requestURL =
    "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
  const request = new Request(requestURL);

  const response = await fetch(request);
  const superHeroes = await response.json();

  populateHeader(superHeroes);
  populateHeroes(superHeroes);
}

为了获取 JSON 数据，我们使用了名为Fetch 的 API。 该 API 允许我们通过 JavaScript 进行网络请求，从服务器检索资源（如图像、文本、JSON，甚至 HTML 片段），这意味着我们可以仅更新页面的小部分内容而无需重新加载整个页面。

在我们的函数中，前四行使用 Fetch API 从服务器获取 JSON 数据：

• 我们声明了 requestURL 变量以存储 GitHub 的 URL
• 我们使用该 URL 初始化一个新的Request对象。
• 我们使用  fetch()函数进行网络请求，它返回一个Response对象
• 我们使用 Response 对象的 json()函数将响应作为 JSON 获取。

注意：fetch() API 是异步的，在使用 fetch API 的函数名称之前添加 async关键字，并在任何异步函数的调用之前添加 await关键字。 

 superHeroes 变量将包含基于 JSON 的 JavaScript 对象。将该对象传递给两个函数调用——第一个函数用正确的数据填充 <header>，而第二个函数为团队中的每个英雄创建一个信息卡，并将其插入到 <section> 中。

填充Header：

现在我们已经获得我们的 JSON 数据，让我们利用它来写两个我们使用的函数。首先，添加下面的代码于之前的代码下方：

function populateHeader(obj) {
  const header = document.querySelector("header");
  const myH1 = document.createElement("h1");
  myH1.textContent = obj.squadName;
  header.appendChild(myH1);

  const myPara = document.createElement("p");
  myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
  header.appendChild(myPara);
}

这里我们首先使用 createElement()创建一个 h1元素，然后将其 textContent设置为对象的 squadName 属性，接着使用 appendChild()将其添加到页眉中。然后，我们使用类似的操作来创建一个段落：创建并设置其文本内容，再将其附加到页眉。唯一的区别在于，它的文本设置为一个包含对象的 homeTown 和 formed 属性的模板字面量。

创建信息：

添加如下的函数到代码底部，这个函数创建信息：

function populateHeroes(obj) {
  const section = document.querySelector("section");
  const heroes = obj.members;

  for (const hero of heroes) {
    const myArticle = document.createElement("article");
    const myH2 = document.createElement("h2");
    const myPara1 = document.createElement("p");
    const myPara2 = document.createElement("p");
    const myPara3 = document.createElement("p");
    const myList = document.createElement("ul");

    myH2.textContent = hero.name;
    myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
    myPara2.textContent = `Age: ${hero.age}`;
    myPara3.textContent = "Superpowers:";

    const superPowers = hero.powers;
    for (const power of superPowers) {
      const listItem = document.createElement("li");
      listItem.textContent = power;
      myList.appendChild(listItem);
    }

    myArticle.appendChild(myH2);
    myArticle.appendChild(myPara1);
    myArticle.appendChild(myPara2);
    myArticle.appendChild(myPara3);
    myArticle.appendChild(myList);

    section.appendChild(myArticle);
  }
}

首先，我们保存了 JSON 的 members 属性作为一个变量。这个数组含有多个带有英雄信息的对象。

接下来，我们使用一个循环来，遍历每个元素。对于每一个元素，我们：

1. 创建几个元素：一个 <article>、一个 <h2>、三个 <p> 和一个 <ul>。
2. 设置 <h2> 为当前英雄的 name。
3. 使用他们的 secretIdentity、age，以及“Superpowers:”介绍信息列表来填充三个段落。
4. 保存 powers 属性于另一个变量 superPowers——包含英雄的超能力的列表。
5. 使用另一个循环来遍历当前的英雄的超能力，对于每一个元素我们创建 <li> 元素，并放入超能力，然后使用 appendChild() 把 listItem 放入<ul> 元素（myList）中。
6. 最后一件事情是将 <h2>、<p> 和 <ul> 追加到 <article>（myArticle）中。然后将 <article> 追加到 <section>。追加的顺序很重要，因为它们将被展示在 HTML 中。

调用顶层函数

最后，我们需要调用顶层函数 populate()：

populate();