Unable to add the datalist to tableRow in alloy titanium

Question

// Controller.js

 $.tblRow_CurrentRow = [];

 var currentList = [
    {plan:' Plan1',date:'18 Feb 2014',tier:'one'},
    {plan:'Plan2',date:'18 Dec 2013',tier:'two'},
    {plan:'Plan3',date:'20 Feb 2014',tier:'three'},
  var data = [];


    for(var i=0;i < currentList.length ;i++){

    if(i%2 == 0){

        $.tblRow_CurrentRow[i].backgroundColor = "#FFFFFF";
    }

    else{

        $.tblRow_CurrentRow[i].backgroundColor = "#ABC012";
    }

    // Set text data to the label 
    $.lbl_Plan.text = currentList[i].plan;
    $.lbl_Date.text = currentList[i].date;
    $.lbl_Tier.text = currentList[i].tier;

    // Adding label to the TableRow!
    $.tblRow_CurrentRow[i].add($.lbl_Plan);
    $.tblRow_CurrentRow[i].add($.lbl_Date);
    $.tblRow_CurrentRow[i].add($.lbl_Tier); 

            data.push($.tblRow_CurrentRow[i]);
 }

$.tbl_TabeleView.data = data;

// Controller.xml

<TableView id = "tbl_TabeleView" >

    <TableViewRow id= "tblRow_CurrentRow">

        <Label id = "lbl_Plan"></Label>
        <Label id = "lbl_Date"></Label>
        <Label id = "lbl_Tier"></Label>

    </TableViewRow>

</TableView>

Issue with adding dataList to tableviewRow in alloy titanium.

Error Message message = "'undefined' is not an object (evaluating '$.tblRow_CurrentRow[i].add')";

Answer 1

In your view you defined $.tblRow_CurrentRow as single TableViewRow. You can't treat it as an array of objects in controller. I fixed your code to make it work, so you can see how it should be:

index.js:

$.tblRow_CurrentRow = [];

 var currentList = [
    {plan:' Plan1',date:'18 Feb 2014',tier:'one'},
    {plan:'Plan2',date:'18 Dec 2013',tier:'two'},
    {plan:'Plan3',date:'20 Feb 2014',tier:'three'},
];

var data = [];


for (var i=0; i < currentList.length; i++){
    $.tblRow_CurrentRow[i] = $.UI.create('TableViewRow', {
        backgroundColor: (i % 2 === 0 ? '#FFFFFF' : '#ABC012'),
        layout: 'vertical',
    });

    // Set text data to the label
    $.tblRow_CurrentRow[i].add(
        $.UI.create('Label', { text: currentList[i].plan } )
    );
    $.tblRow_CurrentRow[i].add(
        $.UI.create('Label', { text: currentList[i].date } )
    );
    $.tblRow_CurrentRow[i].add(
        $.UI.create('Label', { text: currentList[i].tier } )
    );

    data.push($.tblRow_CurrentRow[i]);
}

$.tbl_TabeleView.data = data;

$.getView().open();

index.xml:

<Alloy>
    <Window>
        <TableView id="tbl_TabeleView" />
    </Window>
</Alloy>

Basicly view tempalte contains only simple Window and empty TableView where we will be adding our rows. In your for loop I'm creating TableViewRow object setting different backgrounds and then adding all 3 labels which you need.

Vertical layout let us display labels nicely one under another.
Method $.UI.create('TableViewRow') is just nicer version of Ti.UI.createTableViewRow();. If it's confusing for you, you can replace them.