[
    "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"
上面程式碼絕對是有效的 JSON。你可用陣列指數為開頭來存取陣列項目，例如 [0]["powers"][0]。

<header></header>
<section></section>
加上 <script> 元素，才能納入稍後會在此習題中寫出來的 JavaScript 程式碼。目前只有 2 行程式碼，用以取得 <header> 與 <section> 元素的參考，並將之儲存於變數之中：
js
var header = document.querySelector("header");
var section = document.querySelector("section");
你可到 GitHub 上找到此 JSON 資料：https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json。
接著載入到頁面之中，並使用某些有趣的 DOM 操控 (DOM manipulation) 來顯示，如下：

var requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
為了建立請求，我們必須透過 new 關鍵字，先從 XMLHttpRequest 建構子建立新的請求物件實例。把下列加到最後一行：
js
var request = new XMLHttpRequest();
現在用 open() 函式開啟新的請求。加入下列程式碼：
js
request.open("GET", requestURL);
這樣就顧到至少 2 個參數。當然也有其他參數可選擇。但這個簡易範例只需要 2 個強制參數：
在設立網路請求時，應使用 HTTP 函式。因為這裡只要檢索簡單的資料，所以用 GET 就可以。
URL 提供請求目的地 — 這也就是我們剛剛儲存的 JSON 檔案網址。
接著加入下面 2 行程式碼。我們為 JSON 設定了 responseType，告知伺服器應回傳 JSON 物件，再以 send() 函式傳送請求：
js
request.responseType = "json";
request.send();
最後就是等待由伺服器所回傳的反應，再接著處理。把下列程式碼加入現有程式碼的最下方：
js
request.onload = function () {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
在這裡，我們將所獲得的響應 (可到 response 屬性中找到) 儲存到 superHeroes 變數之中。此變數現在會納入我們的 JSON。接著再把此 JSON 檔案送到 2 個函式呼叫。第一個函式呼叫會將正確資料填入 <header>；第二個函式呼叫則會為團隊中的各個英文建立資訊卡，再插入至 <section> 內。
當於請求物件上觸發載入事件時，會執行一個事件處理器。我們就將程式碼包裹至此處理器之中 (參閱 onload) — 只要成功回傳響應，就會觸發載入事件。之所以這樣做，是為了確保當我們要以 request.response 進行某件事時，此 request.response 絕對可用。

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);
我們已經將參數命名為 jsonObj，所以在這個函式之內就要用 jsonObj 呼叫此參數。這裡先以 createElement() 建立 1 組 <h1> 元素、將其 textContent 指定為 JSON 的 squadName 屬性、透過 appendChild() 將之附加到標頭。接著 <p> 元素依樣畫葫蘆一遍：建立、設定其文字內容、附加到標頭。唯一不同之處，就是將該文字設定為 1 組串接字串 (Concatenated string)，其內包含 JSON 的 homeTown 與 formed 屬性。

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);
我們先把 JSON 的 members 屬性儲存到新的變數中。此陣列所具備的多個物件，均包含了各個超級英雄的資訊。
接著我們以 for 迴圈循環陣列中的各個物件。針對每個物件都會：
建立數個新的元素：1 組 <article>、1 組 <h2>、3 組 <p>、1 組 <ul>。
讓 <h2> 納入目前超級英雄的 name。
接著 3 個段落分別是英雄的 secretIdentity、age、Superpowers，在列表中帶出相關資訊。
另以新變數 superPowers 儲存 powers 屬性 — 其中包含 1 組陣列以列出目前英雄的超能力。
再用另一個 for 迴圈逐一巡過目前英雄的超能力。針對每一項超能力，我們再建立 1 組 <li> 元素，把超能力放進該元素之中，再透過 appendChild() 把 listItem 放入 <ul> 元素之內 (myList)。
最後就是在 <article> (myArticle) 之內附加 <h2>、<p>、<ul>；再把 <article> 附加於 <section> 之內。這附加的順序極為重要，因為這也會是 HTML 中的顯示順序。
如果你無法讓此範例運作，可參閱我們的 heroes-finished.html 原始碼 (亦可看到實際執行情況。)

如果你無法用我們說過的點記法 (dot-)＼括弧記法 (bracket notation) 來存取 JSON，則可用新分頁或自己的文字編輯器開啟 superheroes.json 檔案並參考之。你也可再回去看看 JavaScript 物件基礎概念 ，再次了解點＼括弧記法。

request.responseType = "json";
但有時候沒這麼好運。我們有時會接收到文字字串格式的 JSON 資料，且必須將之轉換為物件。且當我們要以某種訊息傳送 JSON 資料時，也必須將之轉換為字串才能正確運作。還好，這 2 種問題在 Web 開發過程中甚為常見。內建的 JSON 物件很早就新增到瀏覽器之中，且包含下列 2 種函式：
parse()：接收文字字串形式的 JSON 物件作為參數，並回傳對應的物件。
stringify()：接收 JSON 物件作為參數，並回傳對等的文字字串形式。
你可到 heroes-finished-json-parse.html 範例 (參閱原始碼) 中看到第一個函式的運作情形。這其實跟我們先前範例所進行的事情一模一樣，不同之處在於我們設定 XHR 要回傳 JSON 為文字，接著再使用 parse() 轉換為實際的 JSON 物件。關鍵程式碼片段如下：
js
request.open("GET", requestURL);
request.responseType = "text"; // now we're getting a string!
request.send();
request.onload = function () {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
  showHeroes(superHeroes);
你可能會猜 stringify() 就是反過來運作了吧？可在瀏覽器的 JavaScript 主控台上輸入下列程式碼，看看其運作方式：
js
var myJSON = { name: "Chris", age: "38" };
myJSON;
var myString = JSON.stringify(myJSON);
myString;
這樣就建立了 JSON 物件了。接著檢查內容物之後，就可透過 stringify() 將之轉換為字串。將回傳值儲存到新變數之中，再檢查一次即可。