From eebf55a3fc9445ecba523b15433a456d43d2b8b8 Mon Sep 17 00:00:00 2001
From: Clarence Bakosi <clarencepenz@users.noreply.github.com>
Date: Thu, 30 Oct 2025 12:22:15 +0100
Subject: [PATCH] feat(curriculum): Add interactive examples  to How Do You
 Work with Accessing Properties from Nested Objects and Arrays in Objects
 (#63306)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
---
 .../6732b73509f71f24ef05e86e.md               | 47 ++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-introduction-to-javascript-objects-and-their-properties/6732b73509f71f24ef05e86e.md b/curriculum/challenges/english/blocks/lecture-introduction-to-javascript-objects-and-their-properties/6732b73509f71f24ef05e86e.md
index 3d12fb84220..0849296bc50 100644
--- a/curriculum/challenges/english/blocks/lecture-introduction-to-javascript-objects-and-their-properties/6732b73509f71f24ef05e86e.md
+++ b/curriculum/challenges/english/blocks/lecture-introduction-to-javascript-objects-and-their-properties/6732b73509f71f24ef05e86e.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-you-work-with-accessing-properties-from-nested-objects-and-arrays-in-objects
 ---
 
-# --description--
+# --interactive--
 
 When working with JavaScript, you'll often encounter complex data structures that involve nested objects and arrays within objects. These structures can represent rich, hierarchical data, but they also require a clear understanding of how to access and manipulate the data within them. Let's explore how to navigate these nested structures effectively.
 
@@ -29,16 +29,48 @@ const person = {
 
 To access `Alice`'s work phone number, you would chain the property accessors like this:
 
+:::interactive_editor
+
 ```js
+const person = {
+  name: "Alice",
+  age: 30,
+  contact: {
+    email: "alice@example.com",
+    phone: {
+      home: "123-456-7890",
+      work: "098-765-4321"
+    }
+  }
+};
+
 console.log(person.contact.phone.work); // "098-765-4321"
 ```
 
+:::
+
 You can also use bracket notation, which is particularly useful when property names include spaces or special characters, or when you're using variables to access properties:
 
+:::interactive_editor
+
 ```js
+const person = {
+  name: "Alice",
+  age: 30,
+  contact: {
+    email: "alice@example.com",
+    phone: {
+      home: "123-456-7890",
+      work: "098-765-4321"
+    }
+  }
+};
+
 console.log(person['contact']['phone']['work']); // "098-765-4321"
 ```
 
+:::
+
 Now, let’s take a look at how we can access data where one of the object properties has the value of an array. Here is a modified `person` object that includes an array of addresses:
 
 ```js
@@ -54,10 +86,23 @@ const person = {
 
 Here is an example of how to access `Alice`'s work address city:
 
+:::interactive_editor
+
 ```js
+const person = {
+  name: "Alice",
+  age: 30,
+  addresses: [
+    { type: "home", street: "123 Main St", city: "Anytown" },
+    { type: "work", street: "456 Market St", city: "Workville" }
+  ]
+};
+
 console.log(person.addresses[1].city); // "Workville"
 ```
 
+:::
+
 In this example, `person.addresses` refers to the array of addresses. To access the second address in that array, we use bracket notation and index `1`. Then, we use dot notation to access the `city` from that address object.
 
 Understanding how to access properties in nested objects and arrays is essential when working with complex data structures. In future workshops and labs, you will have the opportunity to practice working with these types of data structures.