JavaScript JSON Introduction

---

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:

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:

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:

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

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.

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:

// 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.

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

---

---

---