Recipe 19.5 Creating an XML Object from an Array

19.5.1 Problem

You want to create an XML object using an array to populate it.

19.5.2 Solution

Use a for statement to create and insert the elements and text nodes.

19.5.3 Discussion

Generating an XML object, especially a large one, can be somewhat tedious. In some cases you can make your job a little easier by storing the text node values in an array and inserting them into the XML object using a for loop.

Let's take a look at an example in which you want to create an XML object to represent a menu and the menu items. This might be a useful example if, say, you are creating a Flash movie that allows the user to configure a menu's items and save them to the server so he can retrieve them later on.

// Include XML.as for the custom createElementWithText(  ) method from Recipe 19.4.
#include "XML.as"

// Create the array of text node values.
menuItems = new Array("Springs", "Cogs", "Widgets", "Gizmos");

my_xml = new XML(  );

// Create the root element for the XML object.
rootElement = my_xml.createElement("menu")

// Use a for statement to loop through all the elements in the array.
for (var i = 0; i < menuItems.length; i++) {

  // Create an XML element for each arrangement.
  menuItemElement = my_xml.createElementWithText("menuItem", menuItems[i]);
  rootElement.appendChild(menuItemElement);
}

// Add the root element to the XML object.
my_xml.appendChild(rootElement);

// Displays: <menu><menuItem>Springs</menuItem><menuItem>Cogs</menuItem>
//           <menuItem>Widgets</menuItem><menuItem>Gizmos</menuItem></menu>
trace(my_xml);

The first thing we did in this example was to create an array of options we'll add to the XML object. Each element represents a menu item. In a real-world example the elements of the array might be added one at a time by the user, but in our code snippet we're creating the array all at once for the sake of demonstration. Next, we create a new XML object and a root element. Then, using a for statement, we loop through all the items in the array, create new elements and text nodes one by one, and append them to the root element.

We can also create a custom method, populateFromArray( ), and add it to the XMLNode class. This custom method automates the same process, so you can use it in many different situations, not just when creating an XML packet to represent a menu. Add the following code to your custom XML.as file in your Flash Include directory. The method accepts two parameters: the array of values to add and the name of each nested element.

XMLNode.prototype.populateFromArray = function (items_ar, elementName) {
  for (var i = 0; i < items_ar.length; i++) {
    // Create an element.
    itemElement = my_xml.createElementWithText(elementName, items_ar[i]);
    this.appendChild(itemElement);
  }
};

Next, we'll use the method to accomplish the same thing we did earlier with the menu XML. The uncommented lines of code are the same as before. The new code is shown in bold.

#include "XML.as"

menuItems = new Array("Springs", "Cogs", "Widgets", "Gizmos");
my_xml = new XML(  );
rootElement = my_xml.createElement("menu")

// Populate the rootElement node with the contents of menuItems.
rootElement.populateFromArray(menuItems, "menuItem");

my_xml.appendChild(rootElement);

// Displays: <menu><menuItem>Springs</menuItem><menuItem>Cogs</menuItem>
//           <menuItem>Widgets</menuItem><menuItem>Gizmos</menuItem></menu>


trace(my_xml);