Recipe 20.9. Reading an Element's Attributes

Problem

You want to extract the attributes of an element.

Solution

Use the attributes( ) method to return a list of attributes for an element. Alternatively, use the @ operator in E4X syntax or attribute( ) method to access an attribute by name.

Discussion

You should use the attributes( ) method to return an XMLList of attributes for a particular element node. The XMLList returned is indexable, just like an Array instance. Examining a particular index returns the value for the attribute at that index:

var fruit:XML = <fruit name="Apple" color="red" />;

// Use the attributes(  ) method and save the results as an XMLList
var attributes:XMLList = fruit.attributes(  );

// Displays: Apple
trace( attributes[0] );
// Displays: red
trace( attributes[1] );

In this example, only the values of the attributes are retrieved. Use the name( ) method on the attribute reference to retrieve its name. In the following example, the second attribute (located at index 1) is examined for its name:

var fruit:XML = <fruit name="Apple" color="red" />;

// Displays: color
trace( fruit.attributes(  )[1].name(  ) );

To loop over all of the attributes of an element, use a for each loop. Use a combination of the name( ) method to retrieve the attribute's name and the attribute reference itself for its value. In the following example, toString( ) is explicitly called on the attribute reference to convert its value to a string, like in Recipe 20.8:

var fruit:XML = <fruit name="Apple" color="red" />;

for each ( var attribute:XML in fruit.attributes(  ) ) {
  /* Displays:
  name = Apple
  color = red
  */
  trace( attribute.name(  ) + " = " + attribute.toString(  ) );
}

If you are interested in a particular attribute and know its name, the E4X syntax makes accessing the element trivial. Use E4X to dot down to the particular element node, and then use the @ operator followed by the attribute's name to access its value:

var fruit:XML = <fruit name="Apple" color="red" />;

// Displays: red
trace( fruit.@color );

Additionally, you can use the attribute( ) method and pass in the name of the attribute to access its value:

var fruit:XML = <fruit name="Apple" color="red" />;

// Displays: red
trace( fruit.attribute("color") );

You can also use a wildcard (*) with the @ operator to access all attributes of an element, similar to using the attributes( ) method:

var fruit:XML = <fruit name="Apple" color="red" />;

// Displays: Apple
trace( fruit.@*[0] );

// Displays: red
trace( fruit.@*[1] );

// Displays: 2
trace( fruit.@*.length(  ) );

Because the attributes are always returned as an XMLList, the attributes are indexable, making them easy to access.

E4X syntax is extremely powerful. Consider having an XML packet that contains multiple elements, with certain elements having an attribute named price. The following code snippet shows how you might use E4X to total the prices of all of the elements with a price attribute:

// Create a fictitious shopping cart
var cart:XML = <cart>
                  <item price=".98">crayons</item>
                  <item price="3.29">pencils</item>
                  <group>
                    <item price=".48">blue pen</item>
                    <item price=".48">black pen</item>
                  </group>
                </cart>;

// Create a total variable to represent represent the cart total
var total:Number = 0;

// Find every price attribute, and add its value to the running total
for each ( var price:XML in cart..@price ) {
  total += price;    
}

// Displays: 5.23
trace( total );

By using the double-dot operator before the @ operator in E4X syntax, the search for price attributes looks at the entire XML tree underneath the cart element node.

As shown in Recipe 20.5, you can also use bracket syntax to access an attribute by name in a dynamic manner, or when the attribute name contains characters not allowed in variable names:

var example:XML = <example bad-variable-name="yes" color12="blue" />;
var num:Number = 12;

// Displays: yes
trace( example.@["bad-variable-name"] );

// Displays: blue
trace( example.@["color" + num] );