You are Here:Home>>Old Posts>>AS3 Using XML data and parse it to a List Component – FLASH CS3

AS3 Using XML data and parse it to a List Component – FLASH CS3

Carlos Pinho
By | 2008-02-16T00:52:30+00:00 Feb 16, 2008|Old Posts|

Using AS3 to load XML data it’s quite different than using AS2. In this tutorial I will explain to you, how we can load an external XML data, bring it to the fla file, and parse it to a List component. Using your notepad or similar program, make a simple XML file like the above example.

<?xml version=”1.0″ encoding=”iso-8859-1″?>

<news>
<item date = “01/01/2007>
<title>news1</title>
<description>Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.</description>
<pic>japao1</pic>
</item>
<item date = “02/02/2007>
<title>news2</title>
<description> Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.</description>
<pic>japao2</pic>
</item>
<item date = “03/03/2007>
<title>news3</title>
<description> Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.</description>
<pic>japao3</pic>
</item>
<item date = “04/04/2007>
<title>news4</title>
<description> Lorem ipsum elitrgh dolor sit amet, consectetuer adipiscing elit. Maecenas vitae nisi.</description>
<pic>japao4</pic>
</item></news>

Save it at the same directory as your fla file, naming it as news.xml. Now, the first step to load the xml file, we use the following code:


var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest(“news.xml”));

As you are using AS3, every time we define a variable, we must identify, which kind of variable is it. In the above code we say that the variable xmlLoader belongs to the URLLoader class (xmlLoader:URLLoader), and the xmlData is the type XML (xmlData:XML). When the data is loaded, we must say to the code “where to go”. It’s an event, so xmlLoader.addEventListener(Event.COMPLETE, LoadXML);, it’s the same as saying that when the xml data was completely loaded, then calls the function LoadXML. Now drag a List component into stage, and name it as my_lst.

The following code will define which data we want to show on the List component, as also parse into it.

function LoadXML(e:Event):void {

xmlData = new XML(e.target.data);

ParseNews(xmlData);

}

function ParseNews(newsXML:XML):void {

var newsList:XMLList = newsXML.item.title;

for each (var newsTitle:XML in newsList) {

my_lst.addItem({label:newsTitle, data:newsTitle});

}

}

Run your movie.

On the next tutorial, I will define a new var, to be used as data, instead of using same as label (label:newsTitle, data:newsTitle), giving us the opportunity to bidding data with other components, and retrieve other data by other parameters. By Carlos Pinho

About the Author:

Carlos Pinho
A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.

24 Comments

  1. David February 19, 2008 at 8:14 am - Reply

    Great, that was just what im looking for…really hanging out for the next part with a different var for data.

  2. sushil March 14, 2008 at 7:32 am - Reply

    it is great…
    But can you write more like how and where to load this with some complete example so that i can get more idea in less time about it.
    thanks

  3. nikos101 March 21, 2008 at 9:40 am - Reply

    how would you parse the list to an array instead of a list?

  4. Adnan July 17, 2008 at 4:39 pm - Reply

    Anyone know this same tutorial for AS2 also?

  5. jishnu August 12, 2008 at 7:21 pm - Reply

    very gooddddddd

  6. jishnu ms August 12, 2008 at 7:22 pm - Reply

    it is greatttttttt

  7. zeroone August 21, 2008 at 10:32 am - Reply

    Great !

  8. L September 5, 2008 at 11:43 am - Reply

    This does not work.. really.. I’ve done everything right, but it just gives me errors: XML parser failure: element is malformed.

    What’s wrong ?

  9. Carlos Pinho
    Carlos Pinho September 5, 2008 at 11:59 am - Reply

    Hi L,

    Which line is reverting the error?

  10. This script contains error September 12, 2008 at 1:55 pm - Reply

    This script contains error. I try stept by step, and it doesn’t work. Does anyone has the .fla file?

  11. RichM September 18, 2008 at 10:59 pm - Reply

    I get the same error as L…

    TypeError: Error #1090: XML parser failure: element is malformed.
    at test/LoadXML()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

    Help please! 🙂

  12. RichM September 18, 2008 at 11:01 pm - Reply

    My bad, had the same problem as with the “s around news.xml. You have to convert them all to standard ” rather than “. Works now, thanks.

  13. Sanstenarios November 4, 2008 at 5:08 pm - Reply

    Would you have a link to provide regarding parsing XML to a datagrid component with html columns… in AS3 !;

  14. Lisa November 6, 2008 at 3:43 am - Reply

    parse XML

  15. Melda November 13, 2008 at 12:44 pm - Reply

    I also got the same error as L:
    TypeError: Error #1090: XML parser failure: element is malformed.
    at list_fla::MainTimeline/LoadXML()
    at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/flash.net:URLLoader::onComplete()

    What did I do wrong? Help, please..

  16. Melda November 13, 2008 at 12:50 pm - Reply

    It works now! Yep the “s in the news.xml have to be changed to “

  17. BobN November 18, 2008 at 11:28 pm - Reply

    Works for me! now i have changed the commas in the xml document

  18. BobN November 18, 2008 at 11:41 pm - Reply

    Hi Carlos do you have a link to the follow on tutorial where you define a new var as data instead of (label:newsTitle, data:newsTitle)…cannot find it on the site….and its exactly what I am looking for

    Thanks …great work!!

  19. samson November 22, 2008 at 1:18 pm - Reply

    what do ya mean the (“) needs to be changed to (“) ???

  20. Piano Chords March 9, 2009 at 10:17 pm - Reply

    Great, just what I was looking for. Thanks!

  21. integrationgeneration March 11, 2009 at 2:22 am - Reply

    hi, i am trying to get this done, but it does not work. i dont understand what has to be changed.
    please let me know.
    ig

  22. Flexr org May 26, 2009 at 12:42 am - Reply

    I think it is a shame that Adobe didn’t include error handling for XML parser failures. Most of the time you are in control of the XML that is being delivered to you, but not always. I am doing a project where I have to use XML data delivered by a company that OCR’s books. Their software makes mistakes…

  23. Martijn July 17, 2009 at 9:45 am - Reply

    Two things,
    1. “Now drag a List component into stage, and name it as my_lst.”
    What is a list component? I draged a textfield into stage.
    And 2. I get this error: 1061: Call to a possibly undefined method addItem through a reference with static type flash.text:TextField.

  24. Fighterlegend August 8, 2009 at 10:43 pm - Reply

    Hello, this has helped me.

    But not on this part..

    my_lst.addItem({label:userTitle, data:userTitle});

    I want the data to be what’s inside the news.

    Well, actually what I’m using is User.. It’s for a little app I’m making..

    I have this code:

    function announceLabel(e:ListEvent):void {
    var list:List = e.target as List;
    var item:Object = e.userTitle;
    trace(“Label: ” + item.label);
    trace(“Label displayed: ” + list.itemToLabel(item));
    infoBox.text = list.itemToLabel(item);
    infoBox.appendText(“n”);
    infoBox.appendText(item.label);
    }

    to display the data into a text box, but I don’t have any data.

    Help?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.