2.8 Json0130: json and javascript

Table of contents

• Preface
  • Viewing tip
    • Figures
    • Listings
• Preview
• General background information
• Discussion and sample code
  • Json0130a.htm
  • Json0130b.htm
  • A word of caution
  • Recognizing the difference
• Run the scripts
• Debugging JavaScript
• Miscellaneous
• Complete script listings

Preface

This module is one in a collection of modules designed for teaching ITSE 1356 Introduction to XML at Austin Community College in Austin, TX.

As mentioned in an earlier module, because JSON is an emerging alternative to XML, beginning in the Fall of 2014, the course will include an introductorysection on JSON. The modules in this collection and the online resources pointed to by these modules will be the primary learning resource for the JSON portionof the course.

Viewing tip

I recommend that you open another copy of this module in a separate browser window and use the following links to easily find and view the Figuresand Listings while you are reading about them.

Figures

• Figure 1 . Screen output from Json0130a.htm.
• Figure 2 . Partial screen output from Json0130a.htm.
• Figure 3 . Partial screen output from Json0130a.htm.
• Figure 4 . Screen output from Json0130b,htm.
• Figure 5 . Possible terminology issue.
• Figure 6 . Output from the script.
• Figure 7 . Output from the script.

Listings

• Listing 1 . Define a JavaScript function.
• Listing 2 . Create a JavaScript object.
• Listing 3 . Garbage out.
• Listing 4 . Display keys in object.
• Listing 5 . Display object's values.
• Listing 6 . Transform JavaScript object into a JSON string.
• Listing 7 . Unsuccessful attempt to access name and age.
• Listing 8 . Transform the JSON string into a JavaScript object.
• Listing 9 . Display keys in object.
• Listing 10 . Create a JavaScript object.
• Listing 11 . Transform the object into a JSON string.
• Listing 12 . Transform the JSON string into a JavaScript object.
• Listing 13 . Possible terminology issue.
• Listing 14 . Comparison of object and string.
• Listing 15 . Transform them both.
• Listing 16 . Json0130a.htm.
• Listing 17 . Json0130b.htm.
• Listing 18 . Json0130d.htm

Preview

I will present and explain three JavaScript scripts in this module. Each script shows how to transform a JavaScript object into a JSON string andhow to transform the JSON string back into a JavaScript object.

The first script deals with a very simple JavaScript object. The second script deals with a slightly more complex JavaScript object that encapsulatesan array of JavaScript objects.

The third script illustrates how to tell the difference between a JavaScript object in object literal format and a JSON string.

In addition to the three scripts described above, I will provide a word of caution regarding a possible terminology issue on a major technical websiteusing a script from that website as an example of the issue.

General background information

Prerequisite knowledge

In order to understand the material in this module, you will need a moderate understanding of HTML and JavaScript programming.