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.
Top comments (0)