Working with JSON in JavaScript: Parsing, Stringifying, and Data Exchange

{
  "string": "hello", "number": 42, "decimal": 3.14, "boolean": true, "nothing": null, "array":[1, 2, 3], "object": {
    "nested": "yes"
  }
}

const jsonText = '{"name": "Priya", "age": 22, "skills": ["HTML", "CSS"]}';
const user = JSON.parse(jsonText);
// 📦 string → object!
console.log(typeof user);
// "object" — alive again ✅console.log(user.name);        // "Priya" — dot notation works!console.log(user.skills[1]);   // "CSS" — arrays intact!

const bad = "{'name': 'Priya'}";
// single quotes — invalid!
JSON.parse(bad);
// ❌ SyntaxError: Unexpected token ' in JSON…

function safeParse(text) {
  try {
    return JSON.parse(text);
  } catch (error) {
    console.log("❌ Invalid JSON:", error.message);
    return null;
  }
}console.log(safeParse('{"ok": true}'));
// { ok: true } ✅
console.log(safeParse("{broken…"));
// ❌ Invalid JSON: … → null

const user = {
  name: "Priya", age: 22, isMember: true
};
const jsonText = JSON.stringify(user);
// 📄 object → string!
console.log(jsonText);
// '{"name":"Priya","age":22,"isMember":true}'
console.log(typeof jsonText);
// "string" — ready to send/store ✅

const settings = {
  theme: "dark", fontSize: 16
};
// Save:
localStorage.setItem("settings", JSON.stringify(settings));
// Load later (even after browser restart!):
const saved = JSON.parse(localStorage.getItem("settings"));
console.log(saved.theme);
// "dark" ✅

const newPost = {
  title: "Hello JSON!", body: "My first post"
};
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST", body: JSON.stringify(newPost), // 📄 object → string for the wire
  headers: {
    "Content-Type": "application/json"
  }
});

const user = {
  name: "Priya", address: {
    city: "Mumbai", pin: 400001
  }
};
console.log(JSON.stringify(user, null, 2));

{
  "name": "Priya", "address": {
    "city": "Mumbai", "pin": 400001
  }
}

const weird = {
  name: "Test", fn:() => console.log("hi"), // function
  undef: undefined, // undefined
  date: new Date(), // a Date object
  nan: NaN // NaN
};
const result = JSON.parse(JSON.stringify(weird));
console.log(result);
// {
//   name: "Test",
//   date: "2026-09-19T…",   ← Date became a STRING 😮
//   nan: null               ← NaN became null 😮
// }
// fn and undef: GONE — silently deleted! 😱

// 💾 To-Do List with JSON persistence
let todos =[];
// Load saved todos (if any exist)
function loadTodos() {
  const saved = localStorage.getItem("myTodos");
  if (saved) {
    todos = JSON.parse(saved);
    // 📦 string → array
    console.log(`Loaded ${todos.length} saved todos ✅`);
  }
}// Save todos to storage
function saveTodos() {
  localStorage.setItem("myTodos", JSON.stringify(todos));
  // 📄 array → string
  console.log("💾 Saved!");
}// Add a todo
function addTodo(task) {
  todos.push( {
    task: task, done: false
  });
  saveTodos();
  console.log(`➕ Added: "${task}"`);
}// Mark complete
function completeTodo(index) {
  todos[index].done = true;
  saveTodos();
  console.log(`✅ Completed: "${todos[index].task}"`);
}// Try it:
loadTodos();
addTodo("Learn JSON");
addTodo("Build a project");
completeTodo(0);
console.log(JSON.stringify(todos, null, 2));

[ {
  "task": "Learn JSON", "done": true
}, {
  "task": "Build a project", "done": false
}]

const original = {
  name: "Priya", address: {
    city: "Mumbai"
  }
};
const copy = JSON.parse(JSON.stringify(original));
// deep copy hack
copy.address.city = "Pune";
console.log(original.address.city);
// "Mumbai" ✅ — truly separate!

const copy = structuredClone(original);
// ✅ deep copy, no data loss