As previously mentioned, JSON is based on sets of value pairs, or arrays, which are nested within each other. This nested structure is similar to the way XML is organized and, not surprisingly, both the original XML output and the JSON object share the same organization principles. So, in order to identify where the product title resides within the JSON object, one looks at its XML equivalent and, accounting for any modifications made by the XSL stylesheet, the two structures should correspond. See Figure 11 for an approximate comparison between the structures of the two content types.

Figure 11

XML vs. JSON Structure

The product item data will reside within a table. Due to the hierarchical nature of HTML structure, the DOM object for the table must be built from the inside out: i.e., the innermost tag must first be appended to its parent, which is appended to its parent, and so on. This is done in JavaScript with the appendChild method. Tag attributes are specified using the setAttribute method and style.cssText property.

Product Title Code

      // Item Title
      var li1 = cel('p');
      li1.style.cssText = "margin-top:0px; margin-bottom:2px;";
      var a1 = cel('a');
      a1.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #0068B3; font-weight: bold; text-decoration:none;";
      a1.setAttribute('href', tmpItem.url);
      a1.setAttribute('target', '_blank');
      if(tmpItem.title.length > 30)
      {
         tmpItem.title = tmpItem.title.substr(0, 29) + "..."
      }
      a1.appendChild(ctn(tmpItem.title));
      li1.appendChild(a1);

For aesthetic reasons, the product title has been shortened to 30 characters using the javascript substr() function. The variable for the anchor to the amazon url of the product item title is defined and the title is appended as a subnode. Finally, the anchor is appended to a paragraph tag which will reside in one of the cells of the table.