Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS DSA TYPESCRIPT ANGULAR ANGULARJS GIT POSTGRESQL MONGODB ASP AI R GO KOTLIN SASS VUE GEN AI SCIPY CYBERSECURITY DATA SCIENCE INTRO TO PROGRAMMING BASH RUST

Basic JavaScript

JS Tutorial JS Introduction JS Where To JS Output JS Syntax JS Statements JS Comments JS Variables JS Data Types JS Let JS Const JS Operators JS Strings JS String Templates JS Numbers JS Functions JS Objects JS Events JS Conditionals JS Loops JS Arrays JS Dates JS Math JS Booleans JS Logical JS RegExp JS Errors JS Scope JS Hoisting JS Strict Mode JS Code Blocks JS UTF-8 Characters

JS Advanced

JS Versions JS Overview JS Data Types JS String Methods JS Number Methods JS Date Methods JS Array Methods JS Functions JS Objects JS Classes JS Set Methods JS Map Methods JS Loops JS RegExp Methods JS Promises JS Programming JS HTML DOM JS Windows JS Web API JS AJAX JS JSON JS jQuery JS Graphics JS Examples

JS References

JavaScript Objects


JavaScript JSON

HTML
JSON

JSON stands for JavaScript Object Notation.

JSON is a plain text format for storing and transporting data.

JSON is similar to the syntax for creating JavaScript objects.

JSON is used to send, receive and store data.

Example

'{"name":"John", "age":30, "car":null}'

The example above defines an object with 3 properties:

  • "name"
  • "age"
  • "car"

Each property has a value:

  • "John"
  • 30
  • null

Why JSON?

  • JSON is make it easy to send and store data between computers
  • JSON is text only and language independent *

* The syntax is derived from JavaScript object syntax, but JSON is text only.

Code for reading and generating JSON data can be written in any programming language.

The JSON format was originally specified by Douglas Crockford.


JSON and JavaScript

The JSON format is syntactically identical to the code for creating JavaScript objects.

Because of this, a JavaScript program can easily convert JSON data into native JavaScript objects.

JavaScript has a built in function for converting JSON strings into JavaScript objects:

JSON.parse()

JavaScript also has a built in function for converting an object into a JSON string:

JSON.stringify()

You can receive pure text from a server and use it as a JavaScript object.

You can send a JavaScript object to a server in pure text format.

You can work with data as JavaScript objects, with no complicated parsing and translations.


Storing Data

When storing data, the data has to be a certain format, and regardless of where you choose to store it, text is always one of the legal formats.

JSON makes it possible to store JavaScript objects as text.


JSON Example

Text that defines an employees object with an array of 3 employee objects:

{
"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]
}

If you parse the JSON string with a JavaScript program, you can access the data as an object:

let personName = obj.name;
let personAge = obj.age;


JSON Data - A Name and a Value

JSON data is written as name/value pairs, just like JavaScript object properties.

A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:

"firstName":"John"

JSON names require double quotes. JavaScript names do not.


JSON Objects

JSON objects are written inside curly braces.

Just like in JavaScript, objects can contain multiple name/value pairs:

{"firstName":"John", "lastName":"Doe"}

JSON Arrays

JSON arrays are written inside square brackets.

Just like in JavaScript, an array can contain objects:

"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]

In the example above, the object "employees" is an array. It contains three objects.

Each object is a record of a person (with a first name and a last name).


Converting a JSON Text to a JavaScript Object

A common use of JSON is to read data from a web server, and display the data in a web page.

For simplicity, this can be demonstrated using a string as input.

First, create a JavaScript string containing JSON syntax:

let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Then, use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object:

const obj = JSON.parse(text);

Finally, use the new JavaScript object in your page:

Example

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
Try it Yourself »


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.