JSON
JSON stands for JavaScript Object Notation.
• JSON is a plain text format for storing and transporting data.
• JSON is similar to the syntax for creating JavaScript objects.
• JSON is used to send, receive and store data.
•
Example:
{
"name": "Manisha",
"age": 14,
"city": "Mumbai"
}
JSON and JavaScript
• The JSON format is syntactically identical to the code for creatingJavaScript objects.
• Because of this, a JavaScript program can easily convert JSON datainto JavaScript
objects.
• JavaScript has a built in function for converting JSON strings into JavaScript objects:
[Link]()
• JavaScript also has a built in function for converting an object into a JSON string:
[Link]()
JSON Data - A Name and a Value
• JSON data is written as name/value pairs, just like JavaScript object properties.
• A name/value pair consists of a field name (in double quotes), followed by a
colon, followed by a value:
"firstName":"Manisha"
• JSON names require double quotes. JavaScript names do not.
JSON Objects
JSON objects are written inside curly braces.
Just like in JavaScript, objects can contain multiple name/valuepairs:
{"firstName":"Manisha", "lastName":"Pokharkar"}
JSON Arrays
JSON arrays are written inside square brackets.
Just like in JavaScript, an array can contain objects:
"employees":[
{"firstName":"Manisha", "lastName":"Pokharkar"},
{"firstName":"Yogita", "lastName":"Khandagale"},
{"firstName":"Peter", "lastName":"Jones"}
]
JSON Data Types
In JSON, values must be one of the following data types:
•a string
•a number
•an object (JSON object)
•an array
•a boolean
•null
Reading JSON in [Link]
•[Link] allows you to read JSON files using the require() function.
const data = require("./[Link]");
•[Link] automatically parses the JSON into a JavaScript object.
Accessing JSON Data
•JSON data can be accessed like normal JavaScript objects and arrays.
•In your example, [Link] gives the array of student objects.
Example:
[Link][0].name
[Link][1].city
Looping through JSON
You can use forEach() to go through each item in an array.
In your code:
[Link]((student, index) =>
{ [Link](`${index + 1}. Name: ${[Link]}, Age:${[Link]},
City: ${[Link]}`); });
Example of JSON
[Link]
{
"students": [
{ "name": "Manisha", "age": 15, "city": "Mumbai" },
{ "name": "Riya", "age": 14, "city": "Pune" },
{ "name": "Rohan", "age": 16, "city": "Delhi" }
]
}
11
[Link]
const data = require("./[Link]");
[Link]("All Students:");
[Link]((student, index) => {
[Link](`${index + 1}. Name: ${[Link]},
Age:${[Link]}, City: ${[Link]}`);
});
12
How to run
On vs code
Open VS Code in the node-json-project folder
Open terminal
Run:
node [Link]
13
On Browser
• Use Live Server
• Install Live Server extension in VS Code
• Open your project folder in VS Code
• Right-click [Link] → Open with Live Server
• This runs a local server ([Link] and allows fetch()
to work properly.
14
Use Localhost with [Link]
•If you have [Link], you can quickly serve files:
•Install http-server globally (only once):
npm install -g http-server
•Go to your project folder:
cd path-to-project
•Start the server:
http-server
•Open the URL displayed in terminal (usually [Link] in your
browser
15
Thank You
16
17