JSON

: JavaScript

JavaScript (JSON - JavaScript Object Notation) - JavaScript. - (, , - ). , , JSON JavaScript, JSON, JSON.

:	, HTML CSS, JavaScript (. First steps Building blocks) OOJS (see Introduction to objects).
:	, , JSON, JSON.

, , JSON?

JSON - , JavaScript, . , JavaScript, JavaScript, () JSON.

JSON , . JavaScript, . . JavaScript JSON, .

: ( *)*, , , , ( ).

JSON , .json MIME type application/json.

JSON

, JSON , JavaScript. JSON, JavaScript - , , , . , , :

json

{
  "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"
      ]
    }
  ]
}

JavaScript, superHeroes, , , JavaScript object basics. :

superHeroes.homeTown;
superHeroes["active"];

, . , , , :

superHeroes["members"][1]["powers"][2];

- superHeroes.
members, ['members'].
members , . , [1].
powers, ['powers'].
powers , . , [2].

: JSON, , JSONTest.html (. ). , JavaScript .

JSON

, JSON JavaScript , ., , JSON :

json

[
  {
    "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].

JSON - - , .
JSON , . .
JSON- . , , ( JSON , ). JSON JSONLint.
JSON , JSON, . , , JSON.
JavaScript, , JSON .

: JSON

, , , JSON -.

heroes.html style.css. CSS , HTML- :

html

<header></header>

<section></section>

<script>, JavaScript, . , <header> <section> :

var header = document.querySelector("header");
var section = document.querySelector("section");

JSON GitHub, https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

DOM, , :

[]

JSON

JSON, API, XMLHttpRequest ( XHR). JavaScript, JavaScript (, , , JSON, HTML), , . - , , , , .

, URL- JSON, . JavaScript:

var requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";

, XMLHttpRequest, new. :
js
```
var request = new XMLHttpRequest();
```
, open(). :
js
```
request.open("GET", requestURL);
```
- . :
- HTTP, . GET , .
- URL- - URL- JSON, .
: responseType JSON, XHR , JSON , JavaScript. send():
js
```
request.responseType = "json";
request.send();
```

, . :

request.onload = function () {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
};

( response) superHeroes; JavaScript, JSON! - <header> , <section>.

, , (. onload) - , , ; , , request.response , .

JSON JavaScript, , , . , :

function populateHeader(jsonObj) {
  var header = document.querySelector("header");
  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, , JavaScript JSON. <h1> createElement(), textContent squadName , appendChild(). : , . , , , homeTown, formed .

, :

function showHeroes(jsonObj) {
  var section = document.querySelector("section");
  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);
  }
}

members JavaScript . , .

for loop . :

: <article>, <h2>, <p> <ul>.
<h2>, name .
secretIdentity, age , : :, .
powers superPowers - , .
for, , <li>, , listItem <ul> (myList) appendChild().
, , <h2>, <p> <ul> <article> (myArticle), <article> <section>. , , , HTML.

: , heroes-finished.html (. live).

: / , JavaScript, superheroes.json , , JavaScript. JavaScript objectbasics .

JavaScript, XHR- JSON JavaScript, :

request.responseType = "json";

- JSON . JavaScript , JSON () . , -, JSON , :

parse(): JSON JavaScript.
stringify(): , JSON .

heroes-finished-json-parse.html (. ) - , , , , XHR JSON , parse(), JavaScript. :

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 , :

var myJSON = { name: "Chris", age: "38" };
myJSON;
var myString = JSON.stringify(myJSON);
myString;

JavaScript, , , JSON, stringify() , , .

JSON , , JSON, , . - JavaScript.

: JavaScript

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 14 . 2025 . by MDN contributors.

View this page on GitHub Report a problem with this content

JSON

In this article

, , JSON?

JSON

JSON

: JSON

JSON

Help improve MDN