Skip to main content

Task 15: Understanding JSON with JavaScript

Start with Thanksgiving​

  • With every breath of thankfulness, blessings multiply in unexpected ways.

  • Today, I choose joy over worry, peace over pressure, and contentment over comparison.

  • I declare that every blessing in my life multiplies as I remain thankful.

  • I declare that I walk in abundance, not because of what I have, but because of who I serve.

  • I am a vessel for miracles—because I choose to stay thankful, no matter the season.

  • I declare that my heart is full of gratitude and my mouth speaks life.

  • I declare that thankfulness opens doors no man can shut.

  • I declare that I am a magnet for miracles because I choose gratitude.

  • I declare that I will see God’s goodness in new ways this season.

  • I affirm that gratitude flows through every part of my being today.

💪 Repeat daily, feel the power, and watch your success unfold!

Task Answer - Video Link​

🔹 If you don’t understand the task, watch the video above for the answer.

Task​

— JSON ✅ What is JSON? ✅ How does it look? ✅ How do we use JSON with JavaScript? ✅ What’s the difference between an object and JSON? ✅ Real-life example and a hands-on mini project!

Let’s get started! 🚀

** Step 1: What is JSON?​

JSON stands for JavaScript Object Notation. It’s a way to store and exchange data — especially between a server and your JavaScript app.”

  • Think of it as a universal language for sending data!

Step 2: What Does JSON Look Like?​

JSON looks like a JavaScript object but with double quotes around keys and string values.

let person = {
  name: "Lukas",
  age: 10,
  isStudent: true
};

✅ Same thing in JSON:

{
  "name": "Lukas",
  "age": 10,
  "isStudent": true
}

Notice how the keys in JSON always use double quotes. That’s the main difference!

Step 3: Using JSON in JavaScript​

Let’s say we received JSON data from a server. We can turn it into a JavaScript object using JSON.parse().

let jsonData = '{"name": "Lukas", "age": 10}';
let obj = JSON.parse(jsonData);

console.log(obj.name); // Lukas
console.log(obj.age);  // 10

Step 4: Sending Data as JSON​

Let’s say we want to send data to a server — we’ll turn our object into JSON using JSON.stringify().

let student = {
  name: "Lukas",
  grade: "5th"
};

let jsonToSend = JSON.stringify(student);
console.log(jsonToSend);

  • Output: {"name":"Lukas","grade":"5th"}

Step 5: JSON + Mini Task — Build a Recipe Card! 🍕👨‍🍳​

Let’s build a fun example. We’ll create a recipe object and convert it to JSON.

let recipe = {
  title: "Mini Pizza",
  ingredients: ["Dough", "Tomato Sauce", "Cheese"],
  time: "20 minutes"
};

let recipeJSON = JSON.stringify(recipe);
console.log("🔁 Sending to server:", recipeJSON);

let received = JSON.parse(recipeJSON);
console.log("📥 Back in JS:", received.title);

Recap: What Did We Learn?​

  • JSON is a lightweight way to store and exchange data
  • It looks like an object, but keys and strings use double quotes
  • Use JSON.parse() to turn JSON into JavaScript
  • Use JSON.stringify() to turn JavaScript into JSON
  • Great for APIs, databases, and web apps!