use dataTransform to display collection in a specific order

I want to display my collection in a specific order. Some of the fields have objects and I can't figure how to use a repeater for my objects in my view without messing up the order.

Some of my field is like this in the collection

foo: ['a','b','c'],

bar: ['1','2','3'],

foobar: 'cat'

What i want to do is:

{foobar}

{foo}

{bar}

so something like this

cat

a1

b2

c3

My approach is to use dataTransform and _.each that iterate through those fields and store them in a custom handler.However my dataTransform fires twice and won't display it like this. Why is that? and what is good practice when using nested objects inside a collections. Thanks! I'm fairly new to titanium and mvc.

I managed to print everything out but in the wrong order (grouping). Sample code of my current project i'm using to learn alloy.

alloy

if (OS_IOS || OS_ANDROID) {
    Alloy.Collections.MyCollection = Alloy.createCollection('MyCollection');
 
    try {
        // check for iOS7
        if (OS_IOS && parseInt(Titanium.Platform.version.split(".")[0], 10) >= 7) {
            Alloy.Globals.top = '20dp';
            Alloy.Globals.tableTop = '70dp';
        }
    } catch(e) {
        // catch and ignore
    }
}

function transformFunction(model) {
    var transform = model.toJSON();
 
    var foo_data = [];
 
    //iterate through objects and store each object in a []
    _.each(transform.foo, function(data){
            var row = Ti.UI.createTableViewRow();
            var label = Ti.UI.createLabel({
                 text: data
            });
           row.add(label);
           foo_data.push(row);
    });
 
    var bar_data = [];
 
    _.each(transform.bar, function(data){
            var row = Ti.UI.createTableViewRow();
            var label = Ti.UI.createLabel({
                 text: data
            });
 
           row.add(label);
           bar_data.push(row);
    });
 
    return transform = {
        foo: foo_data,
        bar: bar_data
    };
}

<View dataCollection="MyCollection" dataFilter="whereFunction" dataTransform="transformFunction">
    <Label id="title" text="{foobar}"/>
    <Label text="{barfoo}"/> // just a single value
</View>

<View class="container"> 
    <TableView data="{foo}" scrollable="false"></TableView> //repeat
    <TableView data="{bar}" scrollable="false"></TableView> //repeat
</View>