JavaScript JSON

Oct 11, 2024Kalpana Waghmare

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is primarily used for transmitting data between a server and a web application.

JSON

Introduction to JSON

Use Cases

Commonly used in APIs to exchange data between a client and a server.
Suitable for storing configuration settings and serializing complex data structures.

Do You Know?

JSON is a text-based format that uses a human-readable syntax that is easy to parse by machines. This makes it a popular choice for data exchange in web applications.

JSON Syntax Rules

JSON syntax is derived from JavaScript object notation. The basic rules include:

Data is represented as key/value pairs.
Keys must be strings enclosed in double quotes.
Values can be:
- A string (in double quotes)
- A number
- An object (another JSON object)
- An array
- A boolean (true or false)
- Null
Objects are enclosed in curly braces {} and consist of key/value pairs separated by commas.
Arrays are enclosed in square brackets [] and can contain values of any type, including other arrays or objects.

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "courses": ["HTML", "CSS", "JavaScript"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}

JSON Methods

JSON.parse()

Definition: Parses a JSON string and constructs the JavaScript value or object described by it.

Usage: Useful for converting JSON data received from a server into a JavaScript object.

const jsonString = '{"name": "John Doe", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Outputs: John Doe

JSON.stringify()

Definition: Converts a JavaScript object or value to a JSON string.

Usage: Useful for sending data to a server or storing it in local storage.

const person = {
  name: "John Doe",
  age: 30,
};
const jsonString = JSON.stringify(person);
console.log(jsonString); // Outputs: {"name":"John Doe","age":30}

JSON Array

A JSON array is an ordered collection of values. It is similar to arrays in JavaScript and can contain any type of data.

[
  {"name": "John Doe", "age": 30},
  {"name": "Jane Doe", "age": 25}
]

JSON Server

JSON Server is a simple way to set up a fake REST API with minimal effort. It allows you to create a full fake REST API with JSON data.

Installation

Install Node.js and npm from Node.js official website.

Install JSON Server globally:

npm install -g json-server

Create a JSON file (e.g., db.json) with your data:

{
  "users": [{ "id": 1, "name": "John Doe", "age": 30 }]
}

Start JSON Server:

json-server --watch db.json

Access it at http://localhost:3000.

Usage

Ideal for testing front-end applications without needing a back-end server.
Allows CRUD operations using standard HTTP methods.

Important Note

JSON Server is primarily for development purposes and is not intended for production use.

HTTP Methods in JSON Server

GET: Retrieves data from the server.
POST: Sends data to the server to create a new resource.
PUT: Updates an existing resource on the server.
PATCH: Applies partial modifications to a resource.
DELETE: Deletes a resource from the server.

Avoid This

Avoid using JSON Server for sensitive data as it does not provide security features like authentication or authorization.

Summary

JSON is a lightweight data interchange format that is easy to read, write, and parse.
It is commonly used in APIs and for storing configuration settings.
JSON Server provides a simple way to create a fake REST API for development purposes.
JSON arrays are ordered collections of values that can contain any type of data.
HTTP methods like GET, POST, PUT, PATCH, and DELETE are used for interacting with JSON Server.

Your Course Progress