AS3: Loading and Accessing XML Data

SmartNav

Understanding XML

If you did not already know, XML is an acronym for Extensible Markup Language.

Unlike HTML, XML is used mainly for storing unsecured data, like a simple list of popular movies, sports teams, or video games. Also unlike HTML, XML does not contain predefined elements with predefined styles. In XML you are allowed to define your own elements with custom styles, which is why it is referred to as an "Extensible" Markup Language.

If you are interested in learning how to save secure information via AS3; such as, login information, save game data, or personal information. Shift gears to SQLite on Database Entry.

* If you are developing Air for iOS or Air for Android applications with save data, making use of "SQLite" is a must. No exceptions!

Creating the XML File

In order to access an external XML file via AS3, you obviously need to create it first by doing the following:

1. Toggle the file extensions on in order to display the extensions, or file types, of files on your computer.
   Ex: The ".txt" in the text document file "list.txt"
2. Right click > New > Text Document, and name it "list.xml"
3. When prompted, click "Yes" and you will have successfully created a basic XML file.

After creating "list.xml", double click to open it, or Right Click > Edit, and paste into it the following XML code below:

The information within an XML document must first begin with an "XML" tag, with a version number, and which language to encode like so:

An external XML file must also include a tag that wraps all other tags, in this example it is the <log> tag:

 ...

  

Loading the XML File

In order to load the XML file "list.xml" into AS3, we begin by declaring an XML variable called "list" and a URLLoader variable called "xmlDataLoader":

import flash.net.URLLoader;

var list:XML;
var xmlDataLoader:URLLoader = new URLLoader();
 

Next we tell the URLLoader to load the local file "list.xml" by requesting its URL address, then add a Listener for when it is finished loading. The listener will then call a function that will process the loaded file's data. We will name this function "processXMLData":

This example XML file is in the same folder where the ".swf" file is published; therefor, a directory path is not required.

You can also access an XML file from a server by requesting its web address.

import flash.net.URLLoader;
import flash.net.URLRequest;

var list:XML;
var xmlDataLoader:URLLoader = new URLLoader();

xmlDataLoader.load(new URLRequest("list.xml"));
xmlDataLoader.addEventListener(Event.COMPLETE, processXMLData);
 

Inside the function "processXMLData" is where we set the XML variable equal to the loaded file&qpos;s data.

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;

var list:XML;
var xmlDataLoader:URLLoader = new URLLoader();

xmlDataLoader.load(new URLRequest("list.xml"));
xmlDataLoader.addEventListener(Event.COMPLETE, processXMLData);

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
}
 

If we trace the XML variable "list"…

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;

var list:XML;
var xmlDataLoader:URLLoader = new URLLoader();

xmlDataLoader.load(new URLRequest("list.xml"));
xmlDataLoader.addEventListener(Event.COMPLETE, processXMLData);

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list);
}
 

The output should appear exactly as it does in the XML file "list.xml":

Accessing Elements Within Your XML File

Accessing specific elements within your XML file is as simple as using dot "." notation.

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list.category); /*Output every element within every category tag.*/
}
 

When accessing elements within an XML file, do not include the wrapper tag within the dot notation.

The following code will give an output error:

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list.log.category); /* Improper syntax, remove "log" */
}
  

If your syntax is correct, your trace output will look almost exactly as it did before, but without the <log> tag:

And the following code…

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list.category.title);
}
  

Will output every <title> tag within every <category> tag in your list.

XML and the Index Method

You can also use dot notation in conjuction with the index method – "[i]" used to access array elements; for example:

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list.category[0]); /*Output every element within the 1st category, not just the title elements.*/
 trace(list.category[0].title); /*Output only every <title> element within the 1st category.*/
}
 

Output of the 1st trace statement:

  
  
  
  
  
  Example Tag

  

Output of the 2nd trace statement:

Not specifying which category, will retrieve every element within each category…

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list.category.title[6]); /*Gather each title within each category and output the 7th title.*/
}
 

Output:

?

1	Green Bay Packers

And of course specifying which category will only retrieve the elements within that category…

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list.category[1].title[4]); /*Output the 5th title in the 2nd category.*/
}
 

Output:

?

1	Memphis Grizzlies

Accessing XML Attributes

To access any attribute of an element in your XML file, use the ".@" method.

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list.category[0].@name); /*Output the name attribute of the 1st category.*/
}
 

Output:

?

1	Movie Titles

XML and "FOR Loops"

Instead of typing a line of code to output the data from every element in your XML file, simply make use of the "FOR Loop" statement.

Tedious, rookie syntax:

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 trace(list.category[0].@name + ":");
 trace(list.category[0].title[0] + ",", list.category[0].title[1] + ",", list.category[0].title[2] + ",", list.category[0].title[3] + ",", list.category[0].title[4] + "\n");
 
 trace(list.category[1].@name + ":");
 trace(list.category[1].title[0] + ",", list.category[1].title[1] + ",", list.category[1].title[2] + ",", list.category[1].title[3] + ",", list.category[1].title[4] + "\n");
 
 trace(list.category[2].@name + ":");
 trace(list.category[2].title[0] + ",", list.category[2].title[1] + ",", list.category[2].title[2] + ",", list.category[2].title[3] + ",", list.category[2].title[4]);
}
 

Proper, programmer syntax:

function processXMLData(event:Event):void
{
 list = new XML(event.target.data);
 for (var i:int = 0; i < list.category.length(); i++)
 {
  var titles:String = ""
  trace(list.category[i].@name + ":");
  for (var j:int = 0; j < 5; j++)
  {
   titles += list.category[i].title[j];
   if (j == 4)
   {
    if (i != list.category.length() - 1)
    {
     titles += "\n";
    }
   }
   else
   {
    titles += ", ";
   }
  }
  trace(titles);
 }
}
 

The output for each:

Movie Titles:
Up, Ted, Brave, Avatar, Cars 2

Sports Teams:
Oklahoma City Thunder, Green Bay Packers, San Antonio Spurs, Indiana Pacers, Memphis Grizzlies

Video Games:
Pong, Words With Friends, Pitfall, NBA 2K11, Guitar Hero 2
  

You may begin to think that the rookie way is simpler and requires less code; however, when you begin to handle XML files with massive amounts of data, containing higher levels of nested elements, and multiple attributes…

The "FOR Loop" method will still remain this simple.

To access the number of occurrences of an element within an XML file, instead of an array, you must append "()" to the ".length" method.

for (var i:int = 0; i < list.category.length; i++) /*Error, improper syntax.*/
{
 ...
}
  

for (var i:int = 0; i < list.category.length(); i++) /*Correct, proper syntax.*/
{
 ...
}
  

More on FOR Loops.

In depth tutorial – SQLite on Database Entry.

In depth tutorial – Arrays & Multi-Dimensional Arrays.