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 const person = { name: 'Ola Nordmann', age: 30, isDeveloper: true }; const jsonString = JSON.stringify(person); // logs: '{"name":"Ola Nordmann","age":30,"isDeveloper":true}'
Deserialization in JavaScript
- Function:
JSON.parse()
- Usage: Parses a JSON string, constructing the JavaScript value or object described by the string.
- Example:
javascript 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
- Syntax: Resembles JavaScript object literal syntax, but with some differences (e.g., property names must be in double quotes).
- Data Types: JSON supports strings, numbers, objects, arrays, booleans, and null.
- 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
- 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.
- Parse a JSON String:
Convert the book string back to an object and console.log
the value.
Solution:
- 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}
- 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 }