JavaScript and JSON

JSON stands for JavaScript Object Notation. It is a simple text format used to store and exchange data. This format resembles the syntax used to create JavaScript objects, making it familiar to those who work with JavaScript. JSON is commonly employed to send, receive, and store data.

The following example illustrates an object with three properties:

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

Each property is paired with a value:

• "John"
• 30
• null

Why Use JSON?

JSON facilitates easy data exchange and storage between computers. Although the syntax is derived from JavaScript object syntax, JSON is purely text-based and can be used independently of any programming language. Programmers can write code to generate and read JSON data in any language. The JSON format was originally specified by Douglas Crockford.

JSON and JavaScript

JSON's format is syntactically identical to JavaScript objects, allowing JavaScript applications to seamlessly convert JSON data into native JavaScript objects. JavaScript provides built-in functions for handling JSON:

• JSON.parse() to convert JSON strings into JavaScript objects.
• JSON.stringify() to transform JavaScript objects into JSON strings.

This enables receiving data as text from a server and using it as JavaScript objects, as well as sending JavaScript objects as text format to a server. This process eliminates the need for complex parsing and data translation.

Storing Data with JSON

When storing data, it must be in a specific format, and text is a universally accepted format. JSON allows JavaScript objects to be stored as text.

If a JavaScript program parses a JSON string, the data becomes accessible as an object.

JSON Data Format

JSON data is structured as name/value pairs, similar to JavaScript object properties. Each pair consists of a field name in double quotes, followed by a colon, and a value:

"firstName": "John"

JSON requires names to be enclosed in double quotes, unlike JavaScript.

JSON Objects

JSON objects are enclosed in curly braces. Like JavaScript objects, they can include multiple name/value pairs:

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

JSON Arrays

JSON arrays are defined within square brackets and can contain objects:

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

In this example, "employees" is an array containing three objects, each representing a person's record with a first name and a last name.

Converting JSON Text to JavaScript Objects

A common use-case for JSON is retrieving data from a web server and displaying it on a webpage. This can be demonstrated by using a JSON string. First, define a JavaScript string in JSON format. Then, use JSON.parse() to convert this string into a JavaScript object. Finally, utilize the JavaScript object within your webpage.