| << 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.
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> |
Notification Switch
Would you like to follow the 'Introduction to xml' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|