JSON and JavaScript: Comprehensive Guide

JSON and JavaScript: Comprehensive Guide 1

What is JSON? 2
Features of JSON: 2
Example JSON: 2
Difference Between JSON and JavaScript Objects 3
Converting Between JSON and JavaScript Objects 3

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

1
 1. Parsing JSON to JavaScript Object 3
2. Stringifying JavaScript Object to JSON 3
Accessing JSON Data 3
Example: Nested JSON Access 3
Working with JSON in APIs 4
Fetching Data from an API 4
Posting Data to an API 4
Detailed Examples 4
Example 1: Filter JSON Data 5
Example 2: Dynamically Generate HTML from JSON 5
Exercises 5
Exercise 1: Parse and Access JSON 5
Exercise 2: Convert an Object to JSON 6
Exercise 3: Fetch and Display Data 6
Multiple-Choice Questions 6
Question 1: 6
Question 2: 7
Question 3: 7
Best Practices for JSON in JavaScript 7

JSON (JavaScript Object Notation) is a lightweight data format often used for exchanging data
between a client and a server. This guide explains JSON, its relationship with JavaScript,
practical examples, exercises, and quiz questions to help you master JSON in JavaScript.

What is JSON?

JSON is a text-based format that represents data as key-value pairs, arrays, and objects. It is
commonly used in APIs and web applications.

Features of JSON:

1. Lightweight and easy to read.

2. Language-independent.
3. Supports nested data structures.

Example JSON:
{
"name": "Alice",
"age": 25,
"skills": ["JavaScript", "React", "Node.js"],

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

2
 "isEmployed": true
}

Difference Between JSON and JavaScript Objects

Feature JSON JavaScript Object

Format String Key-value pairs

Quotes Double quotes for Quotes optional for keys

keys/values

Data type Limited (string, number, etc.) Supports functions, undefined,

support etc.

Usage Data exchange Scripting

Converting Between JSON and JavaScript Objects

1. Parsing JSON to JavaScript Object

const jsonString = '{"name": "Alice", "age": 25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // Output: Alice

● JSON.parse(): Converts JSON string to a JavaScript object.

2. Stringifying JavaScript Object to JSON

const obj = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: {"name":"Alice","age":25}

● JSON.stringify(): Converts a JavaScript object to a JSON string.

Accessing JSON Data

Example: Nested JSON Access

const jsonData = {
user: {
name: "Alice",
age: 25,
address: {
city: "New York",
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

3
 zip: "10001"
}
}
};
console.log(jsonData.user.name); // Output: Alice
console.log(jsonData.user.address.city); // Output: New York

Working with JSON in APIs

Fetching Data from an API

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((data) => {
console.log(data); // Logs the array of posts
})
.catch((error) => console.error("Error:", error));

● fetch API: Used to make HTTP requests.

● response.json(): Converts the API response to a JSON object.

Posting Data to an API

const postData = {
title: "My Post",
body: "This is a post.",
userId: 1
};
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(postData)
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));

Detailed Examples

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

4
Example 1: Filter JSON Data
const jsonData = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 }
];
const filteredData = jsonData.filter((person) => person.age > 30);
console.log(filteredData);
// Output: [{ name: "Charlie", age: 35 }]

Example 2: Dynamically Generate HTML from JSON

const jsonData = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];
const container = document.getElementById("container");
jsonData.forEach((user) => {
const div = document.createElement("div");
div.textContent = `${user.name} is ${user.age} years old.`;
container.appendChild(div);
});

HTML:

<div id="container"></div>

Exercises

Exercise 1: Parse and Access JSON

Parse the following JSON string and log the city value:

{
"person": {
"name": "Alice",
"address": {
"city": "New York",
"zip": "10001"
}

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

5
 }
}

Solution:

const jsonString = '{"person": {"name": "Alice", "address": {"city":

"New York", "zip": "10001"}}}';
const obj = JSON.parse(jsonString);
console.log(obj.person.address.city); // Output: New York

Exercise 2: Convert an Object to JSON

Convert the following object to a JSON string:

const obj = { product: "Laptop", price: 1200 };

Solution:

const jsonString = JSON.stringify(obj);

console.log(jsonString); // Output: {"product":"Laptop","price":1200}

Exercise 3: Fetch and Display Data

Fetch user data from https://jsonplaceholder.typicode.com/users and log each

user's name.

Solution:

fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => {
data.forEach((user) => console.log(user.name));
});

Multiple-Choice Questions

Question 1:

Which method converts a JSON string to a JavaScript object?

1. JSON.stringify()
2. JSON.parse()

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

6
 3. JSON.convert()
4. JSON.objectify()

Answer: 2. JSON.parse()

Question 2:

What will JSON.stringify({name: "Alice"}) return?

1. {name: "Alice"}
2. {"name": "Alice"}
3. {}
4. [name: "Alice"]

Answer: 2. {"name": "Alice"}

Question 3:

Which of the following is NOT supported in JSON?

1. String
2. Number
3. Function
4. Boolean

Answer: 3. Function

Best Practices for JSON in JavaScript

1. Validate JSON: Use tools like JSONLint to validate JSON.

2. Use Proper Headers: Set Content-Type: application/json when sending
JSON via APIs.
3. Error Handling: Handle parsing errors with try-catch blocks.
4. Keep JSON Simple: Avoid deeply nested structures for better performance.

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis