feat(curriculum): Add interactive examples to How Do JSON.parse() & JSON.stringify() Work (#63334)

curriculum/challenges/english/blocks/lecture-working-with-json/6732b79c6aa77826855a3f11.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-json-parse-and-json-stringify-work
 ---
 
-# --description--
+# --interactive--
 
 There are two powerful methods in JavaScript for handling JSON data: `JSON.parse()` and `JSON.stringify()`. These methods are commonly used to convert between JSON strings and JavaScript objects.
 
@@ -13,6 +13,8 @@ There are two powerful methods in JavaScript for handling JSON data: `JSON.parse
 
 Here's how you can use the `JSON.stringify()` method:
 
+:::interactive_editor
+
 ```js
 const user = {
   name: "John",
@@ -24,14 +26,12 @@ const jsonString = JSON.stringify(user);
 console.log(jsonString);
 ```
 
-In the example, the JavaScript object `user` is converted into a JSON string that looks like this:
-
-```js
-'{"name":"John","age":30,"isAdmin":true}'
-```
+:::
 
 The `JSON.stringify()` method also accepts an optional parameter called a replacer, which can be a function or an array. Here is an example of using an array for the optional replacer parameter:
 
+:::interactive_editor
+
 ```js
 const developerObj = {
   firstName: "Jessica",
@@ -44,10 +44,14 @@ const developerObj = {
 console.log(JSON.stringify(developerObj, ["firstName", "country"]));
 ```
 
+:::
+
 In this example, we have a `developerObj` with four properties. When we use the `JSON.stringify()` method, we can pass in an array for the second parameter and specify which properties we want stringified. The result will be a stringified object containing only the `firstName` and `country` properties. 
 
 Another optional parameter for the `JSON.stringify()` method would be the spacer parameter. This allows you to control the spacing for the stringified result:
 
+:::interactive_editor
+
 ```js
 const developerObj = {
   firstName: "Jessica",
@@ -68,26 +72,26 @@ console.log(JSON.stringify(developerObj, null, 2));
 */
 ```
 
+:::
+
 Most of the time you will not be using either of these optional parameters for the `JSON.stringify()` method but it is still helpful to be aware of them. 
 
 Another method you will be using a lot in your programming is the `JSON.parse()` method. `JSON.parse()` converts a JSON string back into a JavaScript object. This is useful when you retrieve JSON data from a web server or from `localStorage` and you need to manipulate the data in your application. You will learn more about `localStorage` in a future lesson. 
 
 Here's an example on how to work with the `JSON.parse()` method:
 
+:::interactive_editor
+
 ```js
 const jsonString = '{"name":"John","age":30,"isAdmin":true}';
 const userObject = JSON.parse(jsonString);
+console.log(userObject);
+
+// Result:
+// { name: 'John', age: 30, isAdmin: true }
 ```
 
-The JSON string is parsed back into a JavaScript object that looks like this:
-
-```js
-{
-  name: "John",
-  age: 30,
-  isAdmin: true
-}
-```
+:::
 
 This allows you to work with the data in your program as a normal JavaScript object, making it easier to manipulate and use.