<< Chapter < Page Chapter >> Page >

This JavaScript object contains a property with a key named friends . The value of the friends property is a JavaScript array containing two JavaScript objects. Therefore, Listing 10 uses square bracket ([]) notation to access and display the values in the objects that are elements of the array.

The code in Listing 10 produces the first four lines of output text in Figure 4 .

Transform the object into a JSON string

Listing 11 transforms the JavaScript object into a JSON string and displays the string.

Listing 11 . Transform the object into a JSON string.
document.write( "<br/>Transform the object into a JSON string."); var jsontext = JSON.stringify(obj01);document.write("<br/>Display JSON string."); document.write("<br/>" + jsontext);

This produces the three lines of output text in the group near the center of Figure 4 . Note the similarity of the string shown in Figure 4 and the object literal code used to create the JavaScript object in Listing 10 .

At the risk of becoming boring, I will state once again that even though they may look alike, a JSON string is different from a JavaScript object.A JavaScript object typically has properties and behavior. A JSON string is simply a package of characters and has no properties or behavior other thanthose that may typically be ascribed to any string of characters.

Transform the JSON string into a JavaScript object

Finally, Listing 12 uses the JSON.parse method to transform the JSON string into a JavaScript object and displays the values of the new object's properties.The object named obj02 is a replica of the original object named obj01 that was created in Listing 10 .

Listing 12 . Transform the JSON string into a JavaScript object.
document.write("<br/>Transform the JSON string " + "into a JavaScript object.");var obj02 = JSON.parse(jsontext); document.write("<br/>Display values in object."); document.write("<br/>" + obj02.friends[0].name+ ":" + obj02.friends[0].age);document.write("<br/>" + obj02.friends[1].name+ ":" + obj02.friends[1].age);</script></body>

The code in Listing 12 produces the bottom four lines of output text shown in Figure 4 .

Listing 12 also signals the end of the script.

A word of caution

At this point, I want to alert you to a possible terminology issue that you may encounter while searching the web for information about JSON.

Possible terminology issue

Listing 13 contains a scaled down version of code that I copied from (External Link) plus some code thatI added myself.

Listing 13 . Possible terminology issue.
<!DOCTYPE html><html><body><h2>JSON Object Creation in JavaScript</h2><p>Name:<span id="jname"></span><br />Age:<span id="jage"></span><br /></p><script>var JSONObject= { "name":"John Johnson","age":33}; document.getElementById("jname").innerHTML=JSONObject.namedocument.getElementById("jage").innerHTML=JSONObject.age document.write("Code added by Baldwin");var JSONstring = JSON.stringify(JSONObject); document.write("<br/>" + JSONstring); var JSObject = JSON.parse(JSONstring);document.write("<br/>" + JSObject.name + ", " + JSObject.age);</script></body></html>

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Introduction to xml. OpenStax CNX. Dec 02, 2014 Download for free at https://legacy.cnx.org/content/col11207/1.18
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Introduction to xml' conversation and receive update notifications?

Ask