How to show list of components in Flex - actionscript-3

Question

I'm building a multiplayer game which when connecting to the server, the server sends back a list of available rooms (each room has MaxPlayers,MinRank,TableId,TableName,Password) so everytime I recieve these 5 strings, I create an instance of Mxml UI Component I have created and fill it with the relevant details.
In the main.MXML i've added an AS3 script variable to hold the GameInstances object i've created when rcvd data back from the server:
private var gameInstances:ArrayCollection = new ArrayCollection();
GameInstance.mxml is a component that has UI components in it and AS3 script to set some data.
When rcving data from the server in main.mxml :
var gameInstance:GameInstance = new GameInstance();
gameInstance.setTablePlayers(rcvdMsg[1]);
gameInstance.setTableMinRank(rcvdMsg[2]);
gameInstance.setTableId(rcvdMsg[3]);
gameInstance.setTableName(rcvdMsg[4]);
gameInstance.setTablePassword(rcvdMsg[5]);
gameInstances.addItem(gameInstance);
gameInstances holds objects of that mxml component.
How do I show this component visualy on the main.mxml?
I have a in main.mxml that I want visually show inside it the GameInstance objects.
This is how GameInstance.mxml looks like, I want the s:List to hold for each game a UI object like that(to show it ofcourse)

Answer 1

OK, if you using the gameInstances arraycollection as a data provider for tableList then you need to do a few things.
First, you need to make your gameInstances arraycollection [Bindable]
Then, you need to add data to the array collection as code you posted shows you are.
Next, you have to Create a custom item renderer for your tableList.
Finally, when you are done changing data/adding/removing objects from the gameInstances arraycollection you need to gameInstances.refresh();
[EDIT]
create a file named myListRenderer.mxml and put this code in it
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override protected function commitProperties():void{
// this is where you assign your values
// this function gets called every-time the list scrolls
super.commitProperties();
players.text = this.data.setTablePlayers
minRank.text = this.data.setTableMinRank;
tableId.text = this.data.setTableId;
tableName.text = this.data.setTableName;
tablePassword.text = this.data.setTablePassword;
}
]]>
</mx:Script>
<mx:Label id="players" />
<mx:Label id="minRank" />
<mx:Label id="tableId" />
<mx:Label id="tableName" />
<mx:Label id="tablePassword" />
</mx:VBox>

Answer 2

If I understand the question, when you create components in ActionScript, you have to add them to a container before they'lls how up in the UI. If you have an array of components, you can just loop over that array and add each component as a child on a container. The main application file is a container, so you can do something like this:
for each(var myComp:UIComponent in myArrayList){
addChild(myComp);
}
It would be unusual to take this approach. Usually you just add the component to the parent container as you create them.