Showing XML Nodes from an Array Collection

Question

Hi,

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.rpc.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?

Answer 1

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.