JSON

Introduction

JSON (JavaScript Object Notation) is a lightweight data interchange format. It is easy for humans to read and write, and for machines to parse and generate. JSON is language-independent, but it uses conventions familiar to programmers of the C-family of languages, including JavaScript.

Using JSON

JSON is very simple to use. There is a JSON object built into JavaScript which provides the JSON.stringify() and JSON.parse() methods.

The JSON.stringify() will convert your JavaScript data to a text format that can be shared without any loss of data. The JSON.parse() method will convert a JSON string back to a JavaScript object.

JSON Syntax

We will now look at serialization and deserialization of data by using the JSON.stringify() and JSON.parse() methods.

Serialization in JavaScript

• Function: JSON.stringify()
• Usage: Converts a JavaScript object into a JSON string.
• Example:
  javascript Copy

  	const person = {
  	  name: 'Ola Nordmann',
  	  age: 30,
  	  isDeveloper: true
  	};
  	const jsonString = JSON.stringify(person);
  	// logs: '{"name":"Ola Nordmann","age":30,"isDeveloper":true}'

  Note that the property names are enclosed in double quotes. This is a requirement of the JSON syntax.

Deserialization in JavaScript

• Function: JSON.parse()
• Usage: Parses a JSON string, constructing the JavaScript value or object described by the string.
• Example:
  javascript Copy

  	const jsonString = '{"name": "Ola Nordmann", "age": 30, "isDeveloper": true}';
  	const person = JSON.parse(jsonString);
  	// logs: { name: 'Ola Nordmann', age: 30, isDeveloper: true }

JSON Data Types

JSON is able to parse multiple data types, however we cannot parse functions or undefined values.

Key Concepts of JSON

1. Syntax: Resembles JavaScript object literal syntax, but with some differences (e.g., property names must be in double quotes).
2. Data Types: JSON supports strings, numbers, objects, arrays, booleans, and null.
3. Serialization and Deserialization: Converting JavaScript objects to JSON strings (serialization) and parsing JSON strings back to JavaScript objects (deserialization).

Why JSON is Important in JavaScript

• Data Exchange: JSON is widely used in web applications for sending data between a server and a client.
• Configuration: Many JavaScript tools and frameworks use JSON files for configuration (e.g., package.json in Node.js projects).
• Storage: JSON is used to store data in a structured way, such as in localStorage, sessionStorage and databases like MongoDB.

Conclusion

Understanding JSON is crucial for JavaScript developers in handling data in web applications. Its simplicity and effectiveness in data representation make it an indispensable tool in modern web development.

Lesson Task

Brief

You will practice converting a JavaScript object to a JSON string and back again.

Task: Practice with JSON

1. Create a JSON String:

Define a JavaScript object representing a book with properties for:

• title
• author
• publication year.

Convert the object to JSON and console.log the value.

2. Parse a JSON String:

Convert the book string back to an object and console.log the value.

Solution:

1. Create a JSON String:

	// Create a JavaScript object representing a book
	const book = {
	  title: 'Hunger',
	  author: 'Knut Hamsun',
	  publicationYear: 1890
	};
	
	// Convert the object to JSON
	const jsonString = JSON.stringify(book);
	
	// Log the JSON string
	console.log(jsonString);
	// logs: {"title":"Hunger","author":"Knut Hamsun","publicationYear":1890}

2. Parse a JSON String:

	// Create a JSON string representing a book
	const jsonString = '{"title":"Hunger","author":"Knut Hamsun","publicationYear":1890}';
	// Convert the JSON string to an object
	const book = JSON.parse(jsonString);
	// Log the object
	console.log(book);
	
	// logs: { title: 'Hunger', author: 'Knut Hamsun', publicationYear: 1890 }