Filter XML Data Based on Dates in ActionScript

Posted Oct 12, 2009
Last Updated Nov 12, 2011

You can filter your XML data based on dates in ActionScript to limit results in a component's data provider to one that is relevant to the given task. Doing so, however, is not as straightforward as you would expect. Using E4X, I had assumed that limiting dates would be simple based on data that I had already formatted and provided to a Flex application; what I found was that my assumptions on how this works was wrong and I had to reformat my results in a format that Flex would then process as intended.

Here is a sample of the kind of data that I had supplied via XML (created on a server using PHP). In this example, this is an XMLList named myXMLList

<event id="158863">
<arrive>2009-12-02</arrive>
<depart>2009-12-04</depart>
</event>
<event id="158864">
<arrive>2009-12-08</arrive>
<depart>2009-12-14</depart>
</event>
<event id="158865">
<arrive>2010-12-02</arrive>
<depart>2010-12-04</depart>
</event>
<event id="158866">
<arrive>2009-2-22</arrive>
<depart>2009-2-24</depart>
</event>
<event id="158867">
<arrive>2009-11-06</arrive>
<depart>2009-11-29</depart>
</event>
<event id="158868">
<arrive>2009-12-19</arrive>
<depart>2010-1-06</depart>
</event>

No matter what I tried, I could not get any E4X query to limit data ranges. For example, if I wanted to show dates on or after a DateField value, I tried:

myDataGrid.dataProvider = myXMLList.event.( arrive >= startDate.selectedDate.time );

As it turned out, this type of E4X filter just doesn't work. I tried various combinations that tried to sort based on the given format; I even tried using timestamp comparisons but found that the timestamps that PHP was creating was not being converted to the same format that ActionScript was making from the DateField date objects converted to a timestamp—meaning they could not make accurate comparisons. After digging around, I found out that I could filter by the dates but I had to specifically format the dates that could be converted to a Date object in ActionScript. Below you can see that I added a new attribute called arriveformat and formatted their dates to M/D/YYYY. (I could have changed the value of the arrive and depart elements to match this format instead, but for my purposes I kept both formats because the element value was the desired presentation; the new attribute was simply for filtering.)

<event id="158863">
<arrive arriveformat="12/2/2009">2009-12-02</arrive>
<depart departformat="12/4/2009">2009-12-04</depart>
</event>
<event id="158864">
<arrive arriveformat="12/8/2009">2009-12-08</arrive>
<depart departformat="12/14/2009">2009-12-14</depart>
</event>
<event id="158865">
<arrive arriveformat="12/2/2010">2010-12-02</arrive>
<depart departformat="12/4/2010">2010-12-04</depart>
</event>
<event id="158866">
<arrive arriveformat="2/22/2010">2009-2-22</arrive>
<depart departformat="2/24/2010">2009-2-24</depart>
</event>
<event id="158867">
<arrive arriveformat="11/6/2009">2009-11-06</arrive>
<depart departformat="11/29/2009">2009-11-29</depart>
</event>
<event id="158868">
<arrive arriveformat="12/19/2009">2009-12-19</arrive>
<depart departformat="1/6/2010">2010-1-06</depart>
</event>

The format in this XML is still not ready for the filtering... but I added the rest of the data required in ActionScript since the extra data needed was going to be the same for all values.

Here is the code that would allow my DateField to show only dates after the selected date:

myDataGrid.dataProvider = myXMLList.event.( new Date(arrive.@arriveformat+' 00:00:00 AM').time >= startDate.selectedDate.time ) ;

Notice the parameter passed to the new Date object is the combined value of the arrive attribute with a string ' 00:00:00 AM'; Unfortunately, you cannot just do new Date(arrive).time . Why the Date object would not accept the value of the arrive element is a question I hope that the developers at Adobe address in Flash Builder (the next IDE for developing flash applications that is replacing Flex Builder 3).

There may be better solutions to this problem... but I could not find any online. Documentation on this seemed very poor. I am simply glad that I found something that worked as I need; I hope this can solve your problems as well in similar tasks.

Comment

No HTML Tags are permitted.

Alejo Quiroz

Mar 18, 2010

Fantastic. Thanks you.
Angry Teapot Level Design Awards

Newsletter Subscription