The CallBack Function

Due to the amount of information we will be pulling out of the JSON object, the callback function is quite complex.

Page with Completed CallBack Function

The function builds the search results page using the DOM functions posted above to populate the relevant HTML elements in which we want to display our search results.

The function may be broken down into ten sections as shown on the diagram at the beginning of the tutorial. The JavaScript code has been loosely annotated so you will be able to identify which code applies to each section but be warned that a lot of the code in the function is integrated so changes to the code may require additional tweaking elsewhere.

The remainder of the tutorial will deal with the various sections of the callback function as a quick reference to which code governs which section of the search result. Of course, there is a related css file governing the appearance of the result interface.

The CallBack Function

// Callback function referenced by the JSON script, This teases the
// JSON object out into DOM Nodes, and appends them to 'searchResults' DIV)
var amzJSONCallback = function(tmpData)
{
   // Set Result Count Variable
   var count = 0;

   // Set Container Div Elements for Results
   var gDiv = getEl('searchResults');
   gDiv.innerHTML = "";

   // Clear any previous results
   var sa_listTop = cel('div');
   sa_listTop.setAttribute("id", "sa_listTop");
   var scoller = cel('div');
   scoller.setAttribute("id", "scoller");
   var iDiv = cel('div');
   iDiv.setAttribute("id", "products");

   // Amazon Logo Display
   var viewOptions = cel('div');
   viewOptions.setAttribute("id", "viewOptions");
   var amzlogo = cel('img');
   amzlogo.setAttribute('src', './images/amazon_sm2.png');
   amzlogo.setAttribute('alt', 'amazon.com tutorial');
   amzlogo.cssText = "border:0px;height:20px;width:104px";
   viewOptions.appendChild(amzlogo);

   // Result Sorting
   var sortBy = cel('div');
   sortBy.setAttribute("id", "sortBy");
   var sortByem = cel('em');
   sortByem.appendChild(ctn("Sort By"));
   sortBy.appendChild(sortByem);
   var sortByul = cel('ul');
   var sortByli1 = cel('li');
   var sortByli2 = cel('li');
   var sortByli3 = cel('li');
   var popularity = cel('a');
   if (in_array(tmpData.ItemSet.sort, bssort))
   {
      popularity.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #999999; font-weight:bold;";
   }
   else
   {
      popularity.setAttribute("href", "javascript:amazonSearch('" + tmpData.ItemSet.keywords + "', 'salesrank', '" + tmpData.ItemSet.category + "');");
      popularity.style.cssText = "cursor:hand; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #669966; font-weight:bold; text-decoration:none;";
   }
   popularity.appendChild(ctn("BestSelling"));
   var featured = cel('a');
   if (in_array(tmpData.ItemSet.sort, featuredsort))
   {
      featured.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #999999; font-weight:bold;";
   }
   else
   {
      featured.setAttribute("href", "javascript:amazonSearch('" + tmpData.ItemSet.keywords + "', 'psrank', '" + tmpData.ItemSet.category + "');");
      featured.style.cssText = "cursor:hand; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #669966; font-weight:bold; text-decoration:none;";
   }
   featured.appendChild(ctn("Featured"));
   var pricesort = cel('a');
   if (in_array(tmpData.ItemSet.sort, priceup))
   {
      pricesort.setAttribute("href", "javascript:amazonSearch('" + tmpData.ItemSet.keywords + "', 'price', '" + tmpData.ItemSet.category + "');");
      pricesort.style.cssText = "cursor:hand; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #669966; font-weight:bold; text-decoration:none;";
      pricesort.appendChild(ctn("Price" + "\u25bc"));
   }
   else
   {
      pricesort.setAttribute("href", "javascript:amazonSearch('" + tmpData.ItemSet.keywords + "', '-price', '" + tmpData.ItemSet.category + "');");
      pricesort.style.cssText = "cursor:hand; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #669966; font-weight:bold; text-decoration:none;";
      pricesort.appendChild(ctn("Price" + "\u25b2"));
   }
   sortByli1.appendChild(popularity);
   sortByli2.appendChild(featured);
   sortByli3.appendChild(pricesort);
   sortByul.appendChild(sortByli1);
   sortByul.appendChild(sortByli2);
   sortByul.appendChild(sortByli3);
   sortBy.appendChild(sortByul);

   // Loop for each Result Item
   for(i = 0; i < tmpData.ItemSet.Item.length - 1;
   i ++ )
   {
      count ++ ;
      // Update Result Count

      // Set Item Variable
      var tmpItem = tmpData.ItemSet.Item[i];

      // Define Item Container Variables
      var container = cel('div');
      var content = cel('div');
      var maintable = cel('table');
      var tbody = cel('tbody');
      var tr1 = cel('tr');
      var tr2 = cel('tr');
      var td1 = cel('td');
      var td2 = cel('td');
      var td3 = cel('td');
      var subtable = cel('table');
      var subtbody = cel('tbody');
      var subtr = cel('tr');
      var subtd1 = cel('td');
      var subtd2 = cel('td');

      // Define Item Container Attributes
      container.setAttribute("id", "productsContainer");
      content.setAttribute("id", "productsContent");
      maintable.setAttribute("width", "390px");
      subtable.setAttribute("width", "100%");
      td1.setAttribute("width", "100px");
      td1.setAttribute("rowSpan", "2");
      td2.setAttribute("width", "368px");
      subtd1.setAttribute("width", "50%");
      subtd2.setAttribute("width", "50%");

      // Thumbnail Image
      var ig = cel('img');
      var a_ig = cel('a');
      if (tmpItem.thumburl)
      {
         ig.setAttribute('src', tmpItem.thumburl);
         ig.setAttribute('alt', tmpItem.title);
         ig.style.cssText = "border:0px;height:" + tmpItem.thumbdims[0] + "px;width:" + tmpItem.thumbdims[1] + "px";
      }
      else
      {
         ig.setAttribute('src', "./images/cogs.jpg");
         ig.setAttribute('alt', "No Product Image");
         ig.style.cssText = "border:0px;height:52px;width:75px";
      }

      a_ig.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #0068B3; font-weight: bold; text-decoration:none;";
      a_ig.setAttribute('href', tmpItem.url);
      a_ig.setAttribute('target', '_blank');

      // 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);

      // Item Vendor
      var li2 = cel('p');
      li2.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; font-weight:normal; text-decoration:none;";
      if(tmpItem.vendor)
      {
         li2.appendChild(ctn("Vendor: " + tmpItem.vendor));
      }

      // Item Price
      var li3 = cel('p');
      li3.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; font-weight:normal; text-decoration:none;";
      var a3 = cel('a');
      a3.style.cssText = "cursor:hand; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #990000; font-weight: bold; text-decoration:none;";
      if(tmpItem.lowestnewprice)
      {
         a3.setAttribute("href", "javascript:amazonSearch('" + tmpItem.asin + "', 'price&Condition=New', '" + tmpData.ItemSet.category + "');");
         a3.appendChild(ctn(tmpItem.lowestnewprice + " (" + tmpItem.totalnew + ")"));
         li3.appendChild(ctn("From: "));
         li3.appendChild(a3);
      }
      else if(tmpItem.price)
      {
         li3.appendChild(ctn("Price: " + tmpItem.price));
      }
      else if(tmpItem.lowestusedprice)
      {
         li3.appendChild(ctn("From: " + tmpItem.lowestusedprice + " (" + tmpItem.totalused + ") used"));
      }

      // Item Description
      var li4 = cel('p');
      li4.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #333333; font-weight:normal; margin-top:0px; margin-bottom:2px;";
      if(tmpItem.desc)
      {
         // RegEx used to strip out extraneous HTML and Entities in Description text
         tmpItem.desc = tmpItem.desc.replace(/<.*?>/gi, '');
         tmpItem.desc = tmpItem.desc.replace(/&.*?;/gi, ' ');
         if(tmpItem.desc.length > 121)
         {
            tmpItem.desc = tmpItem.desc.substr(0, 120) + "..."
         }
         li4.appendChild(ctn(tmpItem.desc));
      }

      // Ratings, Sellers & Reviews
      // Define Containers
      var subInfo = cel('div');
      subInfo.setAttribute("id", "subInfo");
      var subInfoUl = cel('ul');
      var subInfoLi1 = cel('li');
      var subInfoLi2 = cel('li');
      var subInfoLi3 = cel('li');
      var subInfoA1 = cel('a');
      var subInfoA2 = cel('a');
      var subInfoA3 = cel('a');
      var subInfoIg = cel('img');
      var selliconIg = cel('img');

      // Ratings
      subInfoIg.setAttribute('src', rateimage(tmpItem.avgrating));
      subInfoIg.setAttribute('alt', tmpItem.avgrating + ' Star Average');
      subInfoIg.setAttribute('align', 'center');
      subInfoIg.style.cssText = "border:0px;height:11px;width:60px;clear:none;margin-right: 5px;padding-right: 5px;";
      subInfoA1.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; color: #0068B3; font-weight: bold;";
      subInfoA1.setAttribute('href', tmpItem.url);
      subInfoA1.setAttribute('target', '_blank');
      subInfoA1.appendChild(subInfoIg);

      // Reviews
      subInfoA2.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; color: #0068B3; font-weight: bold;";
      subInfoA2.setAttribute('href', tmpItem.url);
      subInfoA2.setAttribute('target', '_blank');
      subInfoA2.appendChild(ctn(tmpItem.totalreviews + ' Reviews'));
      if (Number(tmpItem.totalreviews) > 0)
      {
         subInfoLi1.appendChild(subInfoA1);
         subInfoLi2.appendChild(subInfoA2);
      }
      else
      {
         subInfoLi1.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; color: #666666; font-weight: bold; ";
         subInfoLi1.appendChild(ctn('No Votes'));
         subInfoLi2.appendChild(subInfoA2);
      }

      // Sellers
      selliconIg.setAttribute('src', 'images/sa_seller_ico.gif');
      selliconIg.setAttribute('alt', tmpItem.totalsellers + ' Sellers');
      selliconIg.style.cssText = "border:0px;height:10px;width:11px;clear:none;margin-right: 5px;";
      subInfoA3.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; color: #666666; font-weight: bold;";
      subInfoA3.setAttribute('href', tmpItem.url);
      subInfoA3.setAttribute('target', '_blank');
      subInfoA3.appendChild(selliconIg);
      subInfoA3.appendChild(ctn(tmpItem.totalsellers + ' Sellers'));
      if (Number(tmpItem.totalsellers) > 0)
      {
         subInfoLi3.appendChild(subInfoA3);
      }
      else
      {
         subInfoLi3.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; color: #666666; font-weight: bold; ";
         subInfoLi3.appendChild(ctn('No Sellers'));
      }

      // Build Ratings, Reviews & Sellers Display
      subInfoUl.appendChild(subInfoLi1);
      subInfoUl.appendChild(subInfoLi2);
      subInfoUl.appendChild(subInfoLi3);
      subInfo.appendChild(subInfoUl);

      // Build Item Content
      a_ig.appendChild(ig);
      td1.appendChild(a_ig); // Thumbnail
      td2.appendChild(li1); // Title
      td2.appendChild(li4); // Description
      subtd1.appendChild(li2); // Vendor
      subtd2.appendChild(li3); // Price
      subtr.appendChild(subtd1);
      subtr.appendChild(subtd2);
      subtbody.appendChild(subtr);
      subtable.appendChild(subtbody);
      td3.appendChild(subtable);
      tr1.appendChild(td1);
      tr1.appendChild(td2);
      tr2.appendChild(td3);
      tbody.appendChild(tr1);
      tbody.appendChild(tr2);
      maintable.appendChild(tbody);
      content.appendChild(maintable);
      container.appendChild(content);
      container.appendChild(subInfo); // Ratings, Reviews & Sellers
      iDiv.appendChild(container);
      scoller.appendChild(iDiv);
   }
   if(count != 0)
   {
      // Build Result List
      sa_listTop.appendChild(viewOptions);
      sa_listTop.appendChild(sortBy);
      sa_listTop.appendChild(scoller);

      // Build Pagination
      var pagination = paginate (tmpData.ItemSet.pagenum, tmpData.ItemSet.TotalResults, tmpData.ItemSet.category, tmpData.ItemSet.sort, tmpData.ItemSet.keywords);
      sa_listTop.appendChild(pagination);
      gDiv.appendChild(sa_listTop);
      gDiv.appendChild(cel('p'));
   }
   else // If there are no results
   {
      gDiv.appendChild(ctn("sorry, no results found for '" + getEl('asch').value + "'"));
      gDiv.appendChild(cel('p'));
   }
}

Download it here.