Flex Builder - "Data binding will not be able to detect changes when using square bracket operator"

Question

I am building an app. The first page has a list generated from a local xml which when you select an room type on that list, it pushes the nodes under the selected item; title page, page image, and a new list of products in that room to another list on that second page.

The page title , and page image comes in great, but only the products list from the first node in the "item_name" list is being pushed from the first item (room_name) from the first page.

An error saying this comes up: Multiple markers at this line: -Data binding will not be able to detect changes when using square bracket operator. For Array, please use ArrayCollection.getItemAt() instead. -Line breakpoint: fob.mxml [line: 35]

I know i will deal with this again as i want to push info from that selection to a third page with info about that item.

Here's the first page: `

        import mx.events.FlexEvent;

        import spark.events.IndexChangeEvent;

        protected function list_creationCompleteHandler(event:FlexEvent):void
        {
            getDataResult.token = macysmain.getData();
        }

        protected function list_changeHandler(event:IndexChangeEvent):void
        {
            navigator.pushView(fob, event.target.selectedItem);
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <s:CallResponder id="getDataResult"/>
    <macysmain:Macysmain id="macysmain"/>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Image left="10" right="10" top="10" height="40%" smooth="true" source="assets/visual merc.png"/>
<s:List id="list" left="10" right="10" bottom="10" height="55%"
        change="list_changeHandler(event)"
        creationComplete="list_creationCompleteHandler(event)" fontFamily="_sans" fontSize="35"
        labelField="room_name">
    <s:AsyncListView list="    {TypeUtility.convertToCollection(getDataResult.lastResult.room)}"/>
</s:List>
</s:View>`

Second Page(i put ??? ??? around the line in question:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:macysmain="services.macysmain.*"
    title="{data.room_name}">

<fx:Script>
    <![CDATA[
        import com.adobe.serializers.utility.TypeUtility;

        import mx.events.FlexEvent;
        protected function button1_clickHandler(event:MouseEvent):void
        {
            navigator.popView();
        }

        protected function        list_creationCompleteHandler(event:FlexEvent):void
        {
            getDataResult.token = macysmain.getData();
        }

    ]]>
</fx:Script>

<fx:Declarations>
    <s:CallResponder id="getDataResult"/>
    <macysmain:Macysmain id="macysmain"/>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:actionContent>
    <s:Button label="Back" click="button1_clickHandler(event)"/>
</s:actionContent>
<s:List id="list" left="10" right="10" bottom="10" height="55%"
        creationComplete="list_creationCompleteHandler(event)" fontSize="35"
        labelField="item_name">
    ?????????<s:AsyncListView list="    {TypeUtility.convertToCollection(getDataResult.lastResult.room[0].item_list.item)}"/>?????????
</s:List>
<s:Image id="roompic" top="50" width="750" height="325" horizontalCenter="0" smooth="true"
         source="{data.room_image}"/>
</s:View>

I am at a very basic level. Any help you be greatly appreciated.

Answer 1

I know nothing about FlexBuilder, but based on the error message I would suggest you edit the troublesome line to this:

<s:AsyncListView list="{TypeUtility.convertToCollection(getDataResult.lastResult.room.getItemAt(0).item_list.item)}"/>