JavaScript - JSON
Tags: javascript, programming, beginners, codenewbie
Published: 2022-06-04 16:56:49

Hey all 👋 I have been learning a lot about backend development and creating APIs with NodeJS, Express and MongoDB. So, I wanted to write a little bit about JavaScript Object Notation (JSON) and share what I know about them. 

## Table of content
1. [Introduction](#intro)
2. [Methods and Examples](#methods)
3. [Summary](#summary)

## Introduction <a name="intro"></a>

Although the name is JavaScript Object Notation, it is actually widely used in many programming languages not just JS. JSON is a way of formatting data and representing them as plain text and it is often written as key-value pairs similar to the JS Objects. It is commonly used for API as it allows for data to be transferred over network requests and it is often used in configuration files of projects (e.g `package.json` 👀). JSON is very easy to read/write and using them is also easy.

JSON represents data in plain text and it supports many data types such as `String`, `Booleans`, `Numbers`, `Arrays`, `Objects` and `null`. However, it cannot represent `Functions`, `Symbols`, etc.

JSON is language independent.

## Methods and Examples <a name="methods"></a>

The two main methods that you can use when dealing with JSON are `JSON.stringify()` and `JSON.parse()` in JavaScript (other languages will have their own versions of this). 

**JSON.stringify()** - When you would like to convert JS Objects into a JSON string in preparation to send data over the web for example, you can use this method. If an object to be stringify has its own `toJSON` method then `JSON.stringify` will use that during the process, an example of this is the `Date` object. 

Converting objects to JSON string is sometimes known as *serializing* or *json-enconding*.

Syntax and Example:

The full syntax is `JSON.stringify(value, replacer, space)`, where the replacer allow you to modify how you would like the value to be stringify while the "space" option allow you to define the white spaces for better visual representation of the JSON string.

```js
const data = {
  name: "Michael Scott", 
  dob: "15/03/1964", 
  position: "regional manager",
  employees: ["Jim", "Pam", "Dwight", "Angela", "Kevin", "Stanley"],
  lover: {name: "Holly", dob: "03/03/1972"},
  date_added: new Date()
}

const json_data = JSON.stringify(data);

console.log(typeof json_data); // "string"
console.log(json_data); 
// '{"name":"Michael Scott","dob":"15/03/1964","position":"regional manager","employees":["Jim","Pam","Dwight","Angela","Kevin","Stanley"],"lover":{"name":"Holly","dob":"03/03/1972"},"date_added":"2022-06-04T12:33:30.479Z"}'

```
<hr>

**JSON.parse()** - This method allow you to convert JSON string to JS object. You may use this if you wanted to parse some data you received from an API request for example.

Syntax and Example:

The full syntax is `JSON.parse(text, reviver)`, where the reviver allow you transform the value before returning it.

```js
const json_encoded = '{"name": "Jim", "position": "salesperson", "likes": ["ham", "cheese" , "Pam"] }'

const data = JSON.parse(json_encoded);

console.log(typeof data); // "object"
console.log(data.likes[1]) // "cheese"

```

JSON.parse will not automatically parse into the `Date` object, so you can use the reviver option to convert the date string into a `Date` object, for example: 

```js

let json_date = '{"date":"2022-06-04T12:33:30.479Z"}'

function reviver(key, value) {
  if (key === 'date') {
    return new Date(value);
  }
  return value;
}

const data = JSON.parse(json_date, reviver);
console.log(data.date.getFullYear()) // 2022

``` 
Here, I have defined the reviver function but you could use anonymous function if you wanted to, it takes the `key` and `value` pair of the JSON string and if the `key` matches "date" then we would return a `Date` object of the `value` rather than the automatic `JSON.parse` value.

## Summary <a name="summary"></a>

JSON is a data representation format that is independent of programming languages. You can use `JSON.stringify()` and `JSON.parse()` in JavaScript to convert to (*serialize*) and from (*deserialize*) JSON string/text. It can support Primitive values, null, arrays and objects. It is lightweight and easy to use, and you can add options to deal with how you convert to and from JSON.

That is all for today, if you have anything to add please let me know either in the comment below or via [Twitter](https://twitter.com/justtanwa).

![Det. Conan Anime](https://www.direct8.fr/wp-content/uploads/2021/09/detective-conan.jpg)