In keeping with JSON structure, a “For” loop will iterate for the number of JSON “Item” elements in the JSON object calculated from the length property of the JSON “Item” array. If 10 Items are returned in the result, the loop cycle will process the JSON array element indices numbering 0 to 9. As an error checking measure, a “count” variable will increment each time the loop cycles. For ease of reference, a reference variable is set to correspond with the item element reference name within the JSON object; as with the item array element, this variable name will increment each time the loop cycles.

// 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%");
         .
         .
         .
      }

The item data will reside within a table which will be appended to container <div> elements (more for styling reasons). Each HTML tag must be created as a DOM object and then appended to the appropriate parent object. This is how the resulting HTML structure is constructed.

Next, we’ll examine how to append a product title to the DOM for each result item.