| << Chapter < Page | Chapter >> Page > |
| Listing 2 . Create a JavaScript object. |
|---|
document.write("Create a JavaScript object.");
var obj01 = {name:"Bill",age:31,method:aMethod}; |
Recall that there is at least one other way to create an object in JavaScript by using a constructor. I elected this approach because this isthe syntax that is most easily confused with the syntax of a JSON string.
Explanatory output text
The first line of code in Listing 2 produces the first line of output text in Figure 1 . Similar statements will be included at critical points in the scriptso that the output will be somewhat self explanatory.
Garbage out
The code in Listing 3 was included to show that unlike in some other programming languages such as Java, simply passing a JavaScript object to the document.write method does not produce a meaningful output.
| Listing 3 . Garbage out. |
|---|
document.write(
"<br/>Unsuccessful attempt to display object.");
document.write("<br/>" + obj01); |
The code in Listing 3 produced the second and third lines of output text in Figure 1 .
Display keys in object
The code in Listing 4 displays the three keys in the object, producing the fourth line of text in Figure 1 .
| Listing 4 . Display keys in object. |
|---|
document.write("<br/>Display keys in object: ");
for (var key in obj01) {if (obj01.hasOwnProperty(key)) {
document.write(key + " ");}//end if
}//end for loop |
You may (or may not) need to refresh your memory of JavaScript programming to understand the code in Listing 4 . In any event, so far all the code that we have seen is "plain vanilla" JavaScript code.
Display object's values
Let's see one more section of "plain vanilla" code before we get into the good stuff. Listing 5 uses dot notation to display the values of the properties in the object producing the output on line 5 in Figure 1 .
| Listing 5 . Display object's values. |
|---|
document.write("<br/>Display values in object: ");
document.write(obj01.name + ", "+ obj01.age + ", " + obj01.method()); |
Note that the value displayed for the key named method is the result of evaluating the method: true .
Cleanup time
It's getting a little difficult to find the referenced lines in Figure 1 . To make the output text a little easier to find, Figure 2 contains the output text lines from Figure 1 that haven't been discussed yet.
| Figure 2 . Partial screen output from Json0130a.htm. |
|---|
Transform JavaScript object into a JSON string.
Display JSON string {"name":"Bill","age":31}Unsuccessful attempt to access name and age.
undefined, undefinedTransform the JSON string into a JavaScript object.
Display values in object: Bill, 31Display keys in object: name age |
(Note that once again I manually inserted a blank line in Figure 2 to make it easier on the eyes.)
The good stuff
Finally, we are ready to see something new and interesting. The call to the JSON.stringify method in Listing 6 transforms the JavaScript object that was created in Listing 2 into a JSON string and produces the first two lines of output text in Figure 2 .
| Listing 6 . Transform JavaScript object into a JSON string. |
|---|
document.write("<br/>Transform JavaScript object " +
"into a JSON string.");// Note that the method does not become part of the
// JSON string.var jsonstring = JSON.stringify(obj01);
document.write("<br/>Display JSON string " + jsonstring ); |
Notification Switch
Would you like to follow the 'Introduction to xml' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|