# JavaScript JSON Introduction

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616331324721/GSjZnVC3o.png)](https://paykstrt.com/2073/70457)

---

When data is transferred from the browser to the server, the object is converted to **JSON** (**JavaScript Object Notation**) as text.

See the example below:

```js
const person = {
  name: 'Bello',
  age: 27,
  gender: 'male',
  married: null,
  isWebDeveloper: true
};

const toJson = JSON.stringify(person);

console.log(typeof toJson); // string 
// => now the data can be transferred successfully to the server

toJson;

/* 
'{"name":"Bello","age":27,"gender":"male","married":null,"isWebDeveloper":true}'
*/
```

In the example, the result has no extra spaces to save some byte.

> The resulting JSON string is called either JSON-encoded, serialized, stringified, or marshaled object.

Note: A stringified object must be in double quotes, `"name":"Bello",...`

A stringified object in the server also is converted to an object in the browser.

See the example below:

```js
const json = '{"name":"Bello","age":27,"gender":"male","married":null,"isWebDeveloper":true}'
const toObj = JSON.parse(json);

console.log(typeof toObj); // object 
// => now the data can be transferred successfully to the browser

console.log(toObj);

/*
{
  name: 'Bello',
  age: 27,
  gender: 'male',
  married: null,
  isWebDeveloper: true
}
*/
```

`JSON.stringify` can also be used on arrays, and supported primitive data types - `string` `number` `boolean` `null`

See the example below:

```js
const toString_ = JSON.stringify(69);
console.log(typeof toString_ ); // string

console.log( JSON.stringify('JavaScript') ) // "JavaScript" 
// => in double-quotes

const toStr = JSON.stringify(true);
console.log(typeof toStr); // string

const toStr_ = JSON.stringify([ 9, 69, 96 ]); 
console.log(toStr_, typeof toStr_); // [9,69,96] string
```

JSON skips some specific object properties which include:
- Function properties;
- undefined properties;
- Symbolic keys and values

```js
const obj = {
  function() { 
    console.log("skipped function");
  },
  [Symbol("id")]: 123, // skipped
  prop: undefined // skipped
};

console.log( JSON.stringify(obj) ); // {}
```

Lastly, there must be no circular references.

```js
const favNum = {
  favNum1: 69
};

const favLang = {
  favLang: 'Python'
}

favNum.num = favLang; // favNum references favLang
favLang.lang = favNum; // favLang references favNum


JSON.stringify(favNum); // TypeError: Converting circular structure to JSON
```

We can also store and retrieve data from the server. 

See the example below:

```js
// storing data:
const obj = { name: "Bello", age: 27, city: "Lagos" };
const toJson = JSON.stringify(obj); // data moves to the server
localStorage.setItem("testJSON", toJson);

// retrieving data:
const text = localStorage.getItem("testJSON");
const toObj = JSON.parse(text); // data moves to the browser
console.log(toObj.name); // Bello => accessed name
```

The common use of `localStorage` is toggling of mode (light and dark) and authentication.

In the example above, notice that the `setItem` on `localStorage` is used to set or store data in the browser, and also `getItem` on `localStorage` is used to retrieve or get the data to the browser.

%[https://codesandbox.io/s/unruffled-resonance-k1es9?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark]

More on the web API, `window.localStorage` (and `window.sessionStorage`) later.

**Happy coding!!!**

---

[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616331324721/GSjZnVC3o.png)](https://paykstrt.com/2073/70457)