Working with JSON in JavaScript - potatoscript/json GitHub Wiki

🎯 Working with JSON in JavaScript: Your Magical Toolkit! 🧙‍♂️💻

Welcome to the JSON & JavaScript Adventure! 🎉
Imagine you're a wizard 🔮 and JSON is your magic spellbook.
With JavaScript as your wand 🪄, you can read, write, and control JSON easily!
By the end of this adventure, you'll be a JSON JavaScript Master! 🚀

---

📚 What is JSON in JavaScript?

JSON (JavaScript Object Notation) is like a super organized diary that stores information. 📝
JavaScript can read from, modify, and save information in JSON with ease!

---

🎯 Example: Basic JSON Data

{
  "name": "Lucy",
  "age": 25,
  "hobbies": ["reading", "coding", "traveling"]
}

🔍 Explanation:

• name → Key with value "Lucy" (string) 🎀
• age → Key with value 25 (number) 🔢
• hobbies → Key with an array of values 📚🖥️✈️

---

⚡ Why Use JSON in JavaScript?

✅ Data Exchange: Send and receive data between a web server and client.
✅ API Integration: Connect web applications with APIs using JSON.
✅ Local Storage: Save and retrieve user data in the browser.

---

🔥 1. Parsing JSON with JSON.parse()

Imagine you receive JSON data as a string from a web server. 📩
To use it in JavaScript, convert it into an object with JSON.parse()! 🧙‍♂️

---

🎯 Example: Parsing JSON String

let jsonString = '{ "name": "Lucy", "age": 25, "hobbies": ["reading", "coding", "traveling"] }';

// Parse JSON string to JavaScript object
let person = JSON.parse(jsonString);

console.log(person.name);  // Output: Lucy
console.log(person.age);   // Output: 25
console.log(person.hobbies[1]);  // Output: coding

🔍 Explanation:

• JSON.parse() converts the JSON string into a JavaScript object.
• Now person is a JavaScript object with all the data. 🎯

---

✨ 2. Creating JSON with JSON.stringify()

When you want to send data to a server, you convert your JavaScript object into a JSON string. 📤
Use JSON.stringify() to convert an object to a string. 🎁

---

🎯 Example: Converting Object to JSON String

let person = {
  name: "Lucy",
  age: 25,
  hobbies: ["reading", "coding", "traveling"]
};

// Convert JavaScript object to JSON string
let jsonString = JSON.stringify(person);

console.log(jsonString);
// Output: {"name":"Lucy","age":25,"hobbies":["reading","coding","traveling"]}

🔍 Explanation:

• JSON.stringify() converts a JavaScript object into a JSON string.
• This makes it ready to be sent over the internet or stored locally. 🌐

---

🧠 3. Accessing JSON Data in JavaScript

Once you parse a JSON string into an object, you can easily access the data! 🔍

---

🎯 Example: Accessing Data

let person = {
  name: "Lucy",
  age: 25,
  hobbies: ["reading", "coding", "traveling"]
};

console.log(person.name);  // Output: Lucy
console.log(person["age"]);  // Output: 25
console.log(person.hobbies[0]);  // Output: reading

🕵️‍♂️ Two Ways to Access Data:

• Dot Notation: person.name
• Bracket Notation: person["age"]

---

🧩 4. Modifying JSON Data

You can easily modify the data inside a JSON object! 🛠️

---

🎯 Example: Modifying JSON Data

let person = {
  name: "Lucy",
  age: 25,
  hobbies: ["reading", "coding", "traveling"]
};

// Modify properties
person.name = "Berry";
person.age += 1;
person.hobbies.push("gaming");

console.log(person);

🔍 Result:

{
  "name": "Berry",
  "age": 26,
  "hobbies": ["reading", "coding", "traveling", "gaming"]
}

---

🕹️ 5. Adding and Deleting Properties

Want to add or delete something from your JSON object? No problem! 💥

---

🎯 Example: Add New Property

person.country = "Japan";
console.log(person.country);  // Output: Japan

🎯 Example: Delete Property

delete person.age;
console.log(person.age);  // Output: undefined

---

🛰️ 6. Looping Through JSON Objects

You can loop through JSON objects to read and display data dynamically. 🔁

---

🎯 Example: Looping Through an Object

let person = {
  name: "Lucy",
  age: 25,
  hobbies: ["reading", "coding", "traveling"]
};

// Loop through keys in the object
for (let key in person) {
  console.log(key + ": " + person[key]);
}

🔍 Result:

name: Lucy
age: 25
hobbies: reading,coding,traveling

---

📦 7. JSON Arrays and Looping

When you have multiple items stored as an array, loop through them easily! 🔥

---

🎯 Example: Looping Through JSON Array

let people = [
  { "name": "Lucy", "age": 25 },
  { "name": "Berry", "age": 26 },
  { "name": "Snoopy", "age": 5 }
];

// Loop through array
people.forEach(person => {
  console.log(person.name + " is " + person.age + " years old.");
});

🔍 Result:

Lucy is 25 years old.
Berry is 26 years old.
Snoopy is 5 years old.

---

🕵️‍♂️ 8. Nested JSON Objects in JavaScript

Sometimes JSON data has nested objects inside. You can easily navigate them. 🧭

---

🎯 Example: Accessing Nested JSON

let person = {
  name: "Lucy",
  address: {
    city: "Fukuoka",
    country: "Japan"
  }
};

console.log(person.address.city);  // Output: Fukuoka

---

🧪 9. JSON with AJAX for API Calls

You can use JavaScript to get JSON data from APIs using AJAX or Fetch API! 🌐

---

🎯 Example: Fetch JSON from API

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

🔍 Explanation:

• fetch() makes a request to the API.
• response.json() converts the response to JSON.
• Data is logged or processed further.

---

🗂️ 10. Storing and Retrieving JSON in Local Storage

You can store JSON data locally in the browser using localStorage. 🗄️

---

🎯 Example: Store and Retrieve JSON

let user = { name: "Lucy", age: 25 };

// Save to local storage
localStorage.setItem("user", JSON.stringify(user));

// Retrieve from local storage
let storedUser = JSON.parse(localStorage.getItem("user"));

console.log(storedUser.name);  // Output: Lucy

---

🎁 Error Handling in JSON

When working with JSON, things may go wrong! Handle errors with try...catch. 🔥

---

🎯 Example: JSON Error Handling

let invalidJson = "{ name: 'Lucy' }";  // Invalid JSON!

try {
  let data = JSON.parse(invalidJson);
} catch (error) {
  console.error("Oops! JSON error:", error);
}