Titanium Alloy: Can't Get Row Data To Print To A New Row It Is Always Overwriting The Previously Written Data

Hi everyone I was hoping one of you could help me figure out why my row data keeps writing to the same row and overwriting the previously written data instead of starting on a new row after every iteration. Here's what I have so far:

This alloy.js file below gets the information I need for the app from the server and passes it to the formateData() function in the index.js file.

alloy.js

GetDataRequest("http://www.dogfishdata.com/zoo/public/data.json");
 
 
 function GetDataRequest(url)
 {
    var xhr = Ti.Network.createHTTPClient({             
    onload: function(e) 
    {
        Alloy.Globals.formateAnimalData(JSON.parse(xhr.responseText));
    },
 
    onerror: function(e) {
        Ti.API.debug("STATUS: " + this.status);
        Ti.API.debug("TEXT:   " + this.responseText);
        Ti.API.debug("ERROR:  " + e.error);
        alert('There was an error retrieving the remote data. Try again.');
    },
    timeout:5000
 
    });
    xhr.open("GET", url);
    xhr.send();
}

index.js

var appData = [];
 
Alloy.Globals.formateAnimalData = function(data)
{   
    console.log("I was also called");
    for (var i = 1; i <=8; i++)
    {
        var row = {
            name: data.animals[i].name,
            animal: data.animals[i].animal,
            food: data.animals[i].food
        };
        appData.push(Alloy.createController('index', row).getView());
        //console.log(appData); 
    }
};
 
var args = arguments[0] || {};
 
$.name.text = args.name || '';
$.animal.text = args.animal || '';  
$.food.text = args.food || '';
 
 
$.table.setData(appData);
$.index.open();

index.xml

<Alloy>
    <TabGroup id='index'>
        <Tab title="Tab 1" icon="KS_nav_ui.png">
            <Window id='main' class='' title="Zoo">
                <TableView>
                    <TableViewRow id='table'>
                        <Label id ='name'   class ='label'></Label>
                        <Label id ='animal' class ='label'></Label>
                        <Label id ='food'   class ='label'></Label>             
                    </TableViewRow>
                </TableView>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

I should note that the:

$.table.setData(appData);

line in the index.js file doesn't work. The data still prints to the screen even if this line is not in there. The reason for this I think is because the following line:

appData.push(Alloy.createController('index', row).getView());

is not pushing a row of objects into the appData array and infact when I log the contents of the appData array to the screen I get:

(
[INFO] :       "[object index]",
[INFO] :       "[object index]",
[INFO] :       "[object index]",
[INFO] :       "[object index]",
[INFO] :       "[object index]",
[INFO] :       "[object index]",
[INFO] :       "[object index]",
[INFO] :       "[object index]"
[INFO] :   
               )

I am just trying to get it so that it prints the animals: Name, Type and Food Preference to row 1 and the next animals Name, Type and Food Preference to row 2 and so on.

**IF YOU TAKE THAT CODE AND PASTE IT INTO A NEW ALLOY PROJECT IT SHOULD BE EXECUTABLE **

Thanks in advance