HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

JavaScript JSON

JSON (JavaScript Object Notation) is a lightweight data interchange format inspired by JavaScript object literal syntax.

It is commonly used for transmitting data between a server and a web application, as well as for storing and exchanging data in various applications and platforms.

Example

  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "country": "USA"
  },
  "skills": ["JavaScript", "HTML", "CSS"]
}
You can click on above box to edit the code and run again.

Output

Data types in JSON

  • Objects: Enclosed in curly braces {}, consisting of key-value pairs separated by commas.
  • Arrays: Ordered lists of values enclosed in square brackets [].
  • Strings: Enclosed in double quotes " ".
  • Numbers: Integers or floating-point numbers.
  • Boolean values: true or false.
  • Null: Represents an empty value.

JSON Objects

JSON objects are written inside curly braces.

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

Example

{"firstName":"John", "lastName":"Doe"}
You can click on above box to edit the code and run again.

Output

JSON Arrays

JSON arrays are written inside square brackets.

Just like in JavaScript, an array can contain objects:

Example

"employees":[
  {"firstName":"John", "lastName":"Ram"},
  {"firstName":"Anna", "lastName":"Sohan"},
  {"firstName":"Peter", "lastName":"Mohan"}
]
You can click on above box to edit the code and run again.

Output

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. Just like in JavaScript, an array can contain objects:

Example

let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
You can click on above box to edit the code and run again.

Output