DEV Community

Cover image for JavaScript JSON Introduction
Bello Osagie
Bello Osagie

Posted on • Updated on

JavaScript JSON Introduction

image.png


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}'
*/
Enter fullscreen mode Exit fullscreen mode

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
}
*/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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) ); // {}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.


Buy me a Coffee


image.png


Top comments (0)