Create dynamic number of rows from xml appcelerator ios - ios

Question

I have created xml file like below :
//cityState.xml
<Alloy>
<Window id="cityStateMgWin">
<TableView id="cityAndStatesTableView" >
<TableViewRow id="cityStatesRow" ></TableViewRow>
</TableView>
</Window>
//In cityState.js
I am trying to create state rows dynamically with the following code.
for (var i = 0; i < cityAndStatesListJSONData.length; i++) {
$.cityAndStatesTableView.appendRow(Alloy.createController('cityStatesRow', {title : cityAndStatesListJSONData[cityStates].cityState}).getView());
}
When i run the following error will coming please help me
message = "Object is not a constructor (evaluating 'new (require(\"alloy/controllers/\" + name))(args)')";
[ERROR] : stack = "createController\nonload";
is there any mistake to get the ui element from xml file to controller and create dynamic number of rows.
Thanks in advance.

Answer 1

A couple suggestions.
You have underscore available in Alloy
You cannot create a controller based on ID, it needs to be an actual controller.
So... looping through your data is easier this way:
_.each(cityAndStatesListJSONData, function(cityAndState){
});
Next, make a controller cityStatesRow for your row. Should look like this
JS File of this controller:
if ($.args.data.labelProp){
$.myLabel.text = $.args.title;
}
You can do this with as many items as you like, images, labels etc. Whatever you want in the row.
Within the _.each loop you will want to create the controller and pass the data to it:
var controller = Alloy.createController('cityStatesRow', {title : cityAndState.cityState});
And now append it to your TableView
$.cityAndStatesTableView.appendRow(controller.getView());