JSON: What you should know

Introduction

JavaScript Object Notation (JSON) is a language-independent, data serialization format that uses text to store and interchange data. It is based on a subset of the JavaScript language, but can be used in other programming languages as well.

JSON was popularized by Douglas Crockford and it rose to prominence in 2001. It is primarily used as a medium for transmitting data between a server and web applications.

This article will give a general idea of how JSON works, how to use JSON in JavaScript, and what to expect when using JSON.

Things to note 📝

JSON does not support comments.
JSON files are text files with an extension of .json.
JSON has a Multipurpose Internet Mail Extensions (MIME) type / media type of application/json.

Syntax

JSON is built on two major data structures which are typically used to group a set of values together. Programming languages might give these data structures different names but they all perform similar functionality. The data structures are:

An unordered collection of name/value pairs delimited by commas and enclosed by a set of curly braces {}.

This unordered collection is referred to as an object literal in JSON. The name, or key, acts as a pointer to reference a value stored in the object.

JSON object literal example:
```
{
  "handle": "discourse",
  "role": "admin"
}
```
When using object literals in JSON, bear the following in mind:
- The name of the property must be a string with double quotes.
- The name is separated from the value by a colon.

An ordered collection of values where elements are separated by commas.

This is called an array literal in JSON. An array is a zero-indexed data structure which consists of elements that are accessed using their indexes.

JSON array literal example:
```
[
  {
      "id": 1,
      "firstName": "Susan"
  },
  {
      "id": 2,
      "firstName": "Jordan"
  },
  {
      "id": 3,
      "firstName": "Dylan"
  }
]
```

📌 Trailing commas are not permitted in array and object literals when using JSON.

There are no arrays or objects in JSON because JSON data is stored as a string. What we have in JSON are native arrays and objects that have been serialized to strings.

Data types

Excluding the two major data structures, JSON also supports the following data types - with some subtleties to be aware of:

strings - must be surrounded by double quotes.
numbers - leading zeros, NaN and Infinity are not allowed.
boolean: true or false
null
nested array and object literals.

Sample JSON data:

{
    "name": "JavaScript",
    "invented": 1995,
    "founder": "Brendan Eich",
    "frameworks": ["React", "Vue", "Angular"],
    "facts": {
        "type": "scripting language",
        "interpreted": true,
        "aliases": null
    }
}

Converting JSON to JavaScript

Programming languages that support JSON provide functionality for converting native objects to JSON and vice versa. JavaScript has two methods for dealing with JSON:

parse - parses a JSON string and returns an equivalent JavaScript object in a process known as deserialization.

Parsing a JSON string:

// JavaScript file
const jsonText = '{"id": 27, 
"email": "test@mail.com", 
"password": "test_user"}';
JSON.parse(jsonText);

stringify - converts a JavaScript object to JSON format.

Stringifying a JavaScript object:

// JavaScript file
JSON.stringify({
    firstName: 'John',
    lastName: 'Doe',
    isABot: false
})

The output of the stringify function would be a serialized string version of the JavaScript object void of any whitespace.

Ayobami's Blog