Showing XML Nodes from an Array Collection

I've got an XML Doc loaded in. I've created an Horizontal List and referenced the arraycollection as the Data Provider. But what I need to do now is then pull the data out from that.

I have 3 nodes / variables. They are id, title, thumbnail.

But when I go to pull through the data as : {videos.title} Flex Builder gives me the Error - "Access of undefined property videos"

Now I know full well it exists, as when I set the dataProvider to {videos} it pulls through the data without issue.

My code is as follows :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="800" minHeight="600" 
           initialize="channelList.send(),videoList.send()" 
           pageTitle="Video List" 
           width="100%" height="100%" backgroundColor="0x0000" xmlns:local="*">

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
</fx:Style>

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.messaging.Channel;
        import mx.r开发者_JS百科pc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;

        import spark.skins.spark.DefaultComplexItemRenderer;
        import spark.skins.spark.DefaultItemRenderer;

        import videoObjects.Videoinfo;

        // Set the Videos XML to an Array Collection

        var videos:ArrayCollection = new ArrayCollection();


        // Event Handler

        protected function  videoRetrieval_resultHandler(event:ResultEvent):void {

            var videoData:ArrayCollection = event.result.videos.video;

            var viddata:Videoinfo;

             for each (var vid:Object in videoData)
             {
                 viddata = new Videoinfo();

                 viddata.id = vid.id;
                 viddata.title = vid.title;
                 viddata.thumbnail = vid.thumbnail;
                 videos.addItem(viddata);
             }
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->

    <s:HTTPService id="channelList" 
                   url="http://www.spriing.dev/videolist/channelinfo.php" 
                   showBusyCursor="true">
    </s:HTTPService>

    <s:HTTPService id="videoList" 
                   url="http://www.spriing.dev/videolist/videolist.php" 
                   showBusyCursor="true" 
                   result="videoRetrieval_resultHandler(event)">
    </s:HTTPService>

</fx:Declarations>

    <!-- Set Background Image -->
        <mx:Image source="{channelList.lastResult.channels.channel.background_image}" width="100%" height="100%" />
    <!-- End Background Image -->

    <!-- Top Nav / Site Logo etc.. -->
    <s:Group>
        <mx:Image source="file:/Users/stuartblackett/Sites/videolist/img/pokerstars.png" x="14" y="9" />
    </s:Group>

    <!-- Group Channel Information -->
    <s:Group width="100%" height="100%" x="10" y="10" styleName="channelInfo">
        <s:Label text="{channelList.lastResult.channels.channel.name}"  x="19" y="77" width="331" color="#FFFFFF" fontSize="14"/>
        <s:Label text="{channelList.lastResult.channels.channel.description}"  x="19" y="106" width="331" color="#FFFFFF" height="70"/>
        <s:Label text="{channelList.lastResult.channels.channel.breadcrumb}"  x="20" y="61" color="#FFFFFF"/>
        <mx:Image source="{channelList.lastResult.channels.channel.logo}" x="199" y="78" />

            <s:Group width="100%" height="100%">
                <!-- Group Video Data -->

                <s:Label text="FULL EPISODES" color="#FFFFFF" x="493" y="501" height="21"/>
                <mx:HorizontalList id="videoArea"
                                   rowHeight="160" 
                                   columnWidth="180" 
                                   columnCount="5" 
                                   x="489" y="527" 
                                   dataProvider="{videos}" 
                                   labelField="title"
                                   width="653">
                        <mx:itemRenderer>
                            <fx:Component>
                                <mx:VBox>
                                    <mx:Image source="img/"/>
                                    <mx:Label text="{videos.title}"/>
                                </mx:VBox>
                            </fx:Component>
                        </mx:itemRenderer>
                    </mx:HorizontalList>

                <s:VideoPlayer y="63" width="649" height="415" x="493"/>

            </s:Group>

    </s:Group>

 </s:Application>

How do I go about getting the XML Node : title and of course the thumbnail too?

Change <mx:Label text="{videos.title}"/> to

<mx:Label text="{data.title}"/>

To show the image, make it

<mx:Image source="img/{data.thumbnail}"/>

You're trying to access videos from a drop-in item renderer (from within the <mx:component> tag) - you cannot do that directly. The item renderer can access the properties of its outer document through the outerDocument property. Thus outerDocument.videos.title would work - or not. In this case, it won't work the way you want it - you want each item of the list to display the corresponding title. The outerDocument.videos.title will just give you an XMLList of titles - use the data property to access the current item.