Once we have connected our app to a data feed and we're retrieving XML data via the XHR object , we need to be able to manipulate that data and display it into a TableView component. Firstly, create an array object called data at the top of your recipes.js file. This array will hold all of the information for our TableView in a global context:

var data = []; //empty data array

We are now going to disseminate the XML and read in the required elements to our data array object, before finally creating a TableView and assigning its data property to our data object:

//declare the http client object
var xhr = Titanium.Network.createHTTPClient();  

//create the table view
var tblRecipes = Titanium.UI.createTableView({
  height: 366,
  width: 320,
  top: 0,
  left: 0
});
win.add(tblRecipes);

//this method will process the remote data
xhr.onload = function() { 

  var xml = this.responseXML;
  //get the item nodelist from our response xml object 
  var items = xml.documentElement.getElementsByTagName("item");

  //loop each item in the xml
  for (var i = 0; i < items.length; i++) {
    
    //create a table row
    var row = Titanium.UI.createTableViewRow({
      title:    
      items.item(i).getElementsByTagName("title").item(0).text
    });
    
    //add the table row to our data[] object
    data.push(row);

  } //end for loop
  
//finally, set the data property of the tableView to our //data[] object
tblRecipes.data = data;  
 
};  

The following screenshot shows the Table view with the titles of our recipes from the XML feed:

The first thing you will notice is that we are using the Ti.XML namespace to assign the list of elements to a new object called items . This allows us to use a for loop construct in order to loop through the items and assign each individual item to the data array object we created and gave a global scope.

From there we are creating our TableView by implementing the Titanium.UI.createTableView() function. You should notice almost immediately that many of our regular properties are also used by tables, including width, height, and positioning. However, a TableView has one extra and important property—data. The data property accepts an array of data, the values of which can either be used dynamically (as we have done here with the title property) or can be assigned to sub-component children of a TableRow. As you begin to build more complex applications you will learn to fully understand just how flexible table-based layouts can be.