Working with JSON

JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article, we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON.

Prerequisites:	An understanding of HTML and the fundamentals of CSS, familiarity with JavaScript basics as covered in previous lessons.
Learning outcomes:	What JSON is — a very commonly used data format based on JavaScript object syntax. That JSON can also contain arrays. Retrieve JSON as a JavaScript object using mechanisms available in Web APIs (for example, `Response.json()` in the Fetch API). Access values inside JSON data using bracket and dot syntax. Converting between objects and text using `JSON.parse()` and `JSON.stringify()`.

No, really, what is JSON?

JSON is a text-based data format following JavaScript object syntax. It represents structured data as a string, which is useful when you want to transmit data across a network. Even though it closely resembles JavaScript object literal syntax, it can be used independently from JavaScript. Many programming environments feature the ability to read (parse) and generate JSON. In JavaScript, the methods for parsing and generating JSON are provided by the JSON object.

Note: Converting a string to a native object is called deserialization, while converting a native object to a string so it can be transmitted across the network is called serialization.

A JSON string can be stored in its own file, which is basically just a text file with an extension of .json, and a MIME type of application/json.

JSON structure

As described above, JSON is a string whose format very much resembles JavaScript object literal format. The following is a valid JSON string representing an object. Note how it is also a valid JavaScript object literal — just with some more syntax restrictions.

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

If you load this JSON in your JavaScript program as a string, you can parse it into a normal object and then access the data inside it using the same dot/bracket notation we looked at in the JavaScript object basics article. For example:

superHeroes.homeTown;
superHeroes.members[1].powers[2];

First, we have the variable name — superHeroes.
Inside that, we want to access the members property, so we use .members.
members contains an array populated by objects. We want to access the second object inside the array, so we use [1].
Inside this object, we want to access the powers property, so we use .powers.
Inside the powers property is an array containing the selected hero's superpowers. We want the third one, so we use [2].

The key takeaway is that there's really nothing special about working with JSON; after you've parsed it into a JavaScript object, you work with it just like you would with an object declared using the same object literal syntax.

Note: We've made the JSON seen above available inside a variable in our JSONTest.html example (see the source code). Try loading this up and then accessing data inside the variable via your browser's JavaScript console.

Arrays as JSON

Above we mentioned that JSON text basically looks like a JavaScript object inside a string. We can also convert arrays to/from JSON. The below example is perfectly valid 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"
    ]
  }
]

You have to access array items (in its parsed version) by starting with an array index, for example superHeroes[0].powers[0].

The JSON can also contain a single primitive. For example, 29, "Dan Jukes", or true are all valid JSON.

JSON syntax restrictions

As mentioned earlier, any JSON is a valid JavaScript literal (object, array, number, etc.). The converse is not true, though—not all JavaScript object literals are valid JSON.

JSON can only contain serializable data types. This means:
- For primitives, JSON can contain string literals, number literals, true, false, and null. Notably, it cannot contain undefined, NaN, or Infinity.
- For non-primitives, JSON can contain object literals and arrays, but not functions or any other object types, such as Date, Set, and Map. The objects and arrays inside JSON need to further contain valid JSON data types.
Strings must be enclosed in double quotes, not single quotes.
Numbers must be written in decimal notation.
Each property of an object must be in the form of "key": value. Property names must be string literals enclosed in double quotes. Special JavaScript syntax, such as methods, is not allowed because methods are functions, and functions are not valid JSON data types.
Objects and arrays cannot contain trailing commas.
Comments are not allowed in JSON.

Even a single misplaced comma or colon can make a JSON file invalid and cause it to fail. You should be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly). You can validate JSON using an application like JSONLint or JSON-validate

Note: Now you've read through this section, you might also want to supplement your learning with Scrimba's JSON review ^{MDN learning partner} interactive tutorial, which provide some useful guidance around basic JSON syntax and how to view JSON request data inside your browser's devtools.

Active learning: Working through a JSON example

So, let's work through an example to show how we could make use of some JSON formatted data on a website.

Getting started

To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML, plus a

We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

We are going to load the JSON into our script, and use some nifty DOM manipulation to display it, like this:

Image of a document titled

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); }

, an

, three
s, and a
.
Set the
to contain the current hero's `name`.

Fill the three paragraphs with their `secretIdentity`, `age`, and a line saying "Superpowers:" to introduce the information in the list.

Store the `powers` property in another new constant called `superPowers` — this contains an array that lists the current hero's superpowers.

Use another `for...of` loop to loop through the current hero's superpowers — for each one we create an
element, put the superpower inside it, then put the `listItem` inside the
element (`myList`) using `appendChild()`.
The very last thing we do is to append the
,
s, and
inside the
(`myArticle`), then append the
inside the
. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.

Converting between objects and text

The above example was simple in terms of accessing the JavaScript object, because we converted the network response directly into a JavaScript object using response.json().

But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending it. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

parse(): Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.
stringify(): Accepts an object as a parameter, and returns the equivalent JSON string.

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that:

we retrieve the response as text rather than JSON, by calling the text() method of the response
we then use parse() to convert the text to a JavaScript object.

The key snippet of code is here:

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 superHeroesText = await response.text();

  const superHeroes = JSON.parse(superHeroesText);
  populateHeader(superHeroes);
  populateHeroes(superHeroes);
}

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

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

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

async function populate() {\n const requestURL =\n \"https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json\";\n const request = new Request(requestURL);\n\n const response = await fetch(request);\n const superHeroes = await response.json();\n\n populateHeader(superHeroes);\n populateHeroes(superHeroes);\n}\n\nTo obtain the JSON, we use an API called Fetch.\nThis API allows us to make network requests to retrieve resources from a server via JavaScript (e.g., images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page.\n In our function, the first four lines use the Fetch API to fetch the JSON from the server:\n \nwe declare the requestURL variable to store the GitHub URL\nwe use the URL to initialize a new Request object.\n we make the network request using the fetch() function, and this returns a Response object\n we retrieve the response as JSON using the json() function of the Response object.\n\n\nNote:\nThe fetch() API is asynchronous. You can learn about asynchronous functions in detail in our Asynchronous JavaScript module, but for now, we'll just say that we need to add the keyword async before the name of the function that uses the fetch API, and add the keyword await before the calls to any asynchronous functions.\n\n After all that, the superHeroes variable will contain the JavaScript object based on the JSON. We are then passing that object to two function calls — the first one fills the with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the ."}},{"type":"prose","value":{"id":"populating_the_header","title":"Populating the header","isH3":true,"content":"Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:\njsfunction populateHeader(obj) {\n const header = document.querySelector(\"header\");\n const myH1 = document.createElement(\"h1\");\n myH1.textContent = obj.squadName;\n header.appendChild(myH1);\n\n const myPara = document.createElement(\"p\");\n myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;\n header.appendChild(myPara);\n}\n\nHere we first create an h1 element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a template literal containing both the homeTown and formed properties of the object."}},{"type":"prose","value":{"id":"creating_the_hero_information_cards","title":"Creating the hero information cards","isH3":true,"content":" Next, add the following function at the bottom of the code, which creates and displays the superhero cards:\n jsfunction populateHeroes(obj) {\n const section = document.querySelector(\"section\");\n const heroes = obj.members;\n\n for (const hero of heroes) {\n const myArticle = document.createElement(\"article\");\n const myH2 = document.createElement(\"h2\");\n const myPara1 = document.createElement(\"p\");\n const myPara2 = document.createElement(\"p\");\n const myPara3 = document.createElement(\"p\");\n const myList = document.createElement(\"ul\");\n\n myH2.textContent = hero.name;\n myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;\n myPara2.textContent = `Age: ${hero.age}`;\n myPara3.textContent = \"Superpowers:\";\n\n const superPowers = hero.powers;\n for (const power of superPowers) {\n const listItem = document.createElement(\"li\");\n listItem.textContent = power;\n myList.appendChild(listItem);\n }\n\n myArticle.appendChild(myH2);\n myArticle.appendChild(myPara1);\n myArticle.appendChild(myPara2);\n myArticle.appendChild(myPara3);\n myArticle.appendChild(myList);\n\n section.appendChild(myArticle);\n }\n}\n\nTo start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.\nNext, we use a for...of loop to loop through each object in the array. For each one, we:\n \nCreate several new elements: an , an , three s, and a .\nSet the to contain the current hero's name.\nFill the three paragraphs with their secretIdentity, age, and a line saying \"Superpowers:\" to introduce the information in the list.\n Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.\n Use another for...of loop to loop through the current hero's superpowers — for each one we create an element, put the superpower inside it, then put the listItem inside the element (myList) using appendChild().\nThe very last thing we do is to append the , s, and inside the (myArticle), then append the inside the . The order in which things are appended is important, as this is the order they will be displayed inside the HTML.\n\n\nNote:\nIf you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)\n\n \nNote:\nIf you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript.\nYou should also refer back to our JavaScript object basics article for more information on dot and bracket notation.\n"}},{"type":"prose","value":{"id":"calling_the_top-level_function","title":"Calling the top-level function","isH3":true,"content":" Finally, we need to call our top-level populate() function:\n jspopulate();\n"}},{"type":"prose","value":{"id":"converting_between_objects_and_text","title":"Converting between objects and text","isH3":false,"content":"The above example was simple in terms of accessing the JavaScript object, because we converted the network response directly into a JavaScript object using response.json().\nBut sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending it. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:\n \nparse(): Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.\n stringify(): Accepts an object as a parameter, and returns the equivalent JSON string.\n\nYou can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that:\n \nwe retrieve the response as text rather than JSON, by calling the text() method of the response\n we then use parse() to convert the text to a JavaScript object.\n\nThe key snippet of code is here:\njsasync function populate() {\n const requestURL =\n \"https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json\";\n const request = new Request(requestURL);\n\n const response = await fetch(request);\n const superHeroesText = await response.text();\n\n const superHeroes = JSON.parse(superHeroesText);\n populateHeader(superHeroes);\n populateHeroes(superHeroes);\n}\n\nAs you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:\njslet myObj = { name: \"Chris\", age: 38 };\nmyObj;\nlet myString = JSON.stringify(myObj);\nmyString;\n\nHere we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again."}},{"type":"prose","value":{"id":"test_your_skills!","title":"Test your skills!","isH3":false,"content":"You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON."}},{"type":"prose","value":{"id":"summary","title":"Summary","isH3":false,"content":" In this lesson, we've introduced you to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll look at practical techniques for debugging JavaScript and handling errors."}},{"type":"prose","value":{"id":"see_also","title":"See also","isH3":false,"content":" \nJSON reference\n Fetch API overview\n Using Fetch\n HTTP request methods\n\n Previous Overview: Dynamic scripting with JavaScript Next "}}],"isActive":true,"isMarkdown":true,"isTranslated":false,"locale":"en-US","mdn_url":"/en-US/docs/Learn_web_development/Core/Scripting/JSON","modified":"2025-06-03T03:18:41.000Z","native":"English (US)","noIndexing":false,"other_translations":[{"locale":"de","title":"Arbeiten mit JSON","native":"Deutsch"},{"locale":"es","title":"Trabajando con JSON","native":"Español"},{"locale":"fr","title":"Manipuler des données JSON","native":"Français"},{"locale":"ja","title":"JSON の操作","native":"日本語"},{"locale":"ko","title":"JSON으로 작업하기","native":"한국어"},{"locale":"pt-BR","title":"Trabalhando com JSON","native":"Português (do Brasil)"},{"locale":"ru","title":"Работа с JSON","native":"Русский"},{"locale":"zh-CN","title":"使用 JSON","native":"中文 (简体)"},{"locale":"zh-TW","title":"使用 JSON 資料","native":"正體中文 (繁體)"}],"pageTitle":"Working with JSON - Learn web development | MDN","parents":[{"uri":"/en-US/docs/Learn_web_development","title":"Learn"},{"uri":"/en-US/docs/Learn_web_development/Core","title":"Core learning modules"},{"uri":"/en-US/docs/Learn_web_development/Core/Scripting","title":"JavaScript"},{"uri":"/en-US/docs/Learn_web_development/Core/Scripting/JSON","title":"JSON"}],"popularity":null,"short_title":"JSON","sidebarHTML":"Getting started modules Environment setupInstalling software Browsing the web Code editors Dealing with files Command line Your first websiteWhat will it look like? Creating the content Styling the content Adding interactivity Publishing Web standardsHow the web works The web standards model How browsers load websites Soft skillsResearch and learning Collaboration and teamwork Workflows and processes Finding a job Core modules Structuring content with HTMLBasic HTML syntax Web page metadata Headings and paragraphs Emphasis and importance Lists Structuring documents Advanced text features Creating links Challenge: Letter markup Challenge: Bird watching site Images Video and audio Challenge: Mozilla splash page Table basics Table accessibility Challenge: Planet data table Forms and buttons Debugging HTML Test your skillsHTML text basics Links Images Audio and video Advanced HTML text CSS styling basicsWhat is CSS? CSS getting started Challenge: Biography page Basic selectors Attribute selectors Pseudo-classes and elements Combinators Box model Handling conflicts Values and units Sizing Backgrounds and borders Overflow Images, media, forms Styling tables Debugging CSS Challenge: Business card Challenge: Fancy letterhead Challenge: Fancy box styles Test your skillsBackgrounds and borders Box model Cascade Images and forms Overflow Selectors Sizing Tables Values and units Writing modes CSS text stylingText and font fundamentals Styling lists Styling links Web fonts Challenge: Community school homepage CSS layoutIntroduction Floats Positioning Flexbox CSS grid layout Responsive design Media queries Challenge: Fundamental layout Test your skillsFlexbox Floats Grid Multicol Positioning Responsive design and media queries Dynamic scripting with JavaScriptWhat is JavaScript? JavaScript walkthrough Troubleshooting Variables Numbers and operators Strings String methods Arrays Challenge: Story generator Conditionals Loops Functions Build your own function Function return values Events Event bubbling Challenge: Image gallery Objects DOM scripting Network requests JSON Debugging and error handling Test your skillsArrays Conditionals Events Functions JSON Loops Math Objects Strings Variables JavaScript frameworks and librariesIntroduction Framework features React getting started React ToDo app React components React events and state React editing, filtering, conditional UI React accessibility React resources AccessibilityWhat is accessibility? Accessibility tools Accessible HTML Accessible CSS and JS WAI-ARIA Accessible multimedia Mobile accessibility Challenge: A11y debugging Test your skillsCSS and JavaScript HTML WAI-ARIA Design for developers Version control Extension modules Advanced JavaScript objectsObject prototypes Object-oriented programming Classes in JavaScript Object building practice Challenge: Bouncing balls features Test your skillsObject-oriented JavaScript Client-side web APIsIntroduction Video and audio Drawing graphics Client-side storage Third-party APIs Asynchronous JavaScriptIntroduction Using promises Implementing promise-based APIs Introducing workers Challenge: Animation sequence Web formsYour first form How to structure a web form Basic native form controls The HTML5 input types Other form controls Styling web forms Advanced form styling Customizable selects UI pseudo-classes Client-side form validation Sending form data Test your skillsBasic controls Basic styling Form structure Input types Form validation Other controls Advanced styling Understanding client-side toolsOverview Package management Sample toolchain Deploying our app Server-side websitesFirst stepsIntroduction Client-server overview Server-side frameworks Website security Django (Python)Django introduction Dev environment setup 1: Local library tutorial 2: Skeleton website 3: Models 4: Django admin site 5: Home page 6: Generic list and detail views 7: Sessions framework 8: Authentication and permissions 9: Forms 10: Testing 11: Deploying Django security Challenge: Django blog Express (Node.js)Express/Node introduction Dev environment setup 1: Local library tutorial 2: Skeleton website 3: Using databases with Mongoose 4: Routes and controllers 5: Displaying data 6: Working with forms 7: Deploying Web performanceThe \"why\" of web performance What is web performance? Perceived performance Measuring performance Multimedia: Images Multimedia: video Performant JavaScript Performant HTML Performant CSS Performance business case TestingIntroduction Testing strategies Common HTML and CSS problems Feature detection Automated testing Automation environment setup Further resources How to solve common problemsCommon CSS problems Common HTML problems Common JavaScript problems Design and accessibility Tools and setup Web mechanics About Resources for educators Changelog","sidebarMacro":"learnsidebar","source":{"folder":"en-us/learn_web_development/core/scripting/json","github_url":"https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/scripting/json/index.md","last_commit_url":"https://github.com/mdn/content/commit/ad2ee21660739777fc8874a93670cd518a6d3fff","filename":"index.md"},"summary":"JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article, we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON.","title":"Working with JSON","toc":[{"text":"No, really, what is JSON?","id":"no_really_what_is_json"},{"text":"Active learning: Working through a JSON example","id":"active_learning_working_through_a_json_example"},{"text":"Converting between objects and text","id":"converting_between_objects_and_text"},{"text":"Test your skills!","id":"test_your_skills!"},{"text":"Summary","id":"summary"},{"text":"See also","id":"see_also"}],"pageType":"learn-module-chapter"}}