This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
The Power of Arrays III - Nested Arrays: What they are, and how to use them

The Power of Arrays III - Nested Arrays: What they are, and how to use them

This is the final installment of the "Power of Arrays" tutorials and it will cover nested arrays. Before we get into what nested arrays are, let's go over how the text will appear throughout the tutorial.

Regular text will look like this.

code: All code will look like this


Output: All output display text will look like this

What is a Nested Array?
A nested array is simply an array placed within another array as a single element like this:

myArray = new Array(["fName","lName"], ["age","location"]);
trace(myArray);



//Output: fName, lName, age, location

When we traced the array, all the elements in both nested arrays as if they were individual elements, so this time we will trace the first element alone in myArray.

myArray = new Array(["fName","lName"], ["age","location"]);
trace(myArray[0]);



//Output: fName, lName

Notice when we traced the first element of myArray (the first nested array), all the elements of that nested array were traced, but lets say we wanted to get to a single element of a nested array, we use the same syntax as we would retrieving an element from any other array, but we use an additional indexing point held in its own set of brackets. In this example, we will pull the first element of the first nested array.

myArray = new Array(["fName","lName"], ["age","location"]);
trace(myArray[0][0]);



//Output: fName

And because nested arrays act as singular elements in arrays, they can be manipulated like elements in arrays.

Here we will create a couple of arrays, and then place them in a new array as singular elements. Then we will do the same thing using the push() method.

nameArray = new Array("fName", "lName");
locationArray = new Array("city", "state");
myArray = new Array(nameArray, locationArray);
trace(myArray);



//Output: fName, lName, city, state

This time with the push method.

nameArray = new Array("fName", "lName");
locationArray = new Array("city", "state");
myArray = new Array();
myArray.push(nameArray);
myArray.push(locationArray);
trace(myArray);



//Output: fName, lName, city, state

Ok, so now we see that nested arrays can be manipulated like other arrays, lets see an applied example using some simple looping statement. We will create three arrays representing three students, in each array there are four elements representing four different test scores. We are going to place each of the student arrays as nested arrays into a singular class array. Then we will find out the average for each student.

//create the 3 arrays to hold the students scores
student1 = new Array(85,88,76,94);
student2 = new Array(76,75,81,80);
student3 = new Array(88,90,87,99);
//now create an array to hold the students scores as nested arrays
classArray = new Array(student1,student2,student3);
//now create an array to hold the averages
var averages=new Array();
//now we make a couple loop statements to get the average from each student

for(var i=0; i < classArray[0].length; i++){
  for(var j=0; j < classArray.length; j++){
    averages[j]+=Math.round((classArray[j])/classArray[0].length);
  }
}
trace(averages);



//Output: 86,78,92

That was pretty good; we took all the scores from each student and gave each student an average. You could throw in some string literals if you wanted and another loop statement to trace each average on its own line, but you get the idea.

Nested arrays with named elements
So far all the elements in our arrays have been indexed array elements, but often times you will want to use named array elements. Just to recap, named array elements are elements that do not use indexing but instead use string literals.

Here is an example:

myArray = new Array();
myArray.age=22;
trace(myArray.age);



//Output: 22

Notice that we had to use dot syntax to retrieve the data held in the named element, named elements must be called by name to retrieve the data.

Now we know what a named array element is, let's see how to use them in nested arrays. First, we will see how to retrieve the information out of them.

myArray = new Array();
myArray.fName="David";
myArray.age=22;
anotherArray=new Array(myArray);
trace(anotherArray[0].fName);



//Output: David

Now that we see how named array elements can be used with nested arrays, we are going go over a great use of named elements in nested arrays with a combo box component. What we will do is create a couple arrays with named array elements, the names for the elements will be specific so when we set the main array to the component, the elements will map smoothly, but more on that later. Right now we will create the initial arrays we will place in a main array later. Place this code in the main timeline:

//first create the array to hold all of the players
team=new Array();

//now push each players information as a nested array into the main array
team.push({label: "David", data: "Point Guard"});
team.push({label: "Paul", data: "Shooting Guard"});
team.push({label: "Ben", data: "Small Forward"});
team.push({label: "Jimmy", data: "Power Forward"});
team.push({label: "Doug", data: "Center"});



Notice the names of the elements, "label" and "data", this is important when we map to the component.

Ok, now drag an instance of the combo box component onto the main stage, and then name the instance of it myCombo_cb and in the parameters of this component, name the Change Handler onSelect, we will use that later when we retrieve information from the combo box.

Now go back into the actions we already have, we will use the setDataprovider() method to set the array to the combo box component so add these to the actions:

//now we set the combo box to the main array we created using "data provider"
myCombo_cb.setDataProvider(team);



If you want, you can test the movie now and see how the combo box will display all the "label" elements that are held in the main array team. But once you're done testing, go back to the actions in the timeline, now we are going to make a function that will display the data held in the component. So place these actions in the same place in the timeline where the others are:

//now when a user selects a player, it will trace that players position
onSelect=function(){
 trace(myCombo_cb.getValue());

}



Test the movie again, and the labels are still there, but now if you select one, it will trace that player's position in the output window. That was pretty neat, we took an array placed nested arrays in it that each held named elements with specific names. Then we simply mapped the named elements to the component using the setDataProvider() method.

Sorting
For the last piece of the tutorial we are going to go over a new method for arrays called sortOn(), now technically, you could sort the component after we put data in it, but because this tutorial is about arrays and not components we will sort the array before we place it in the component.

To use the sortOn() method, you attach it to an array using dot syntax, and in the parentheses place the named element you want to sort the nested arrays by in quotes. Here is a generic example:

myArray.sortOn("name");



Ok, now we know what it is supposed to look like, let's apply it to the example we've been working on. We will need to sort the array before we set the data provider for our component. So before we set the data provider, place this code in:

//sort the array by the players name
team.sortOn("label");



Your final code should look like this:

//first create the array to hold all of the players
team=new Array();
//now push each players information as a nested array into the main array
team.push({label: "David", data: "Point Guard"});
team.push({label: "Paul", data: "Shooting Guard"});
team.push({label: "Ben", data: "Small Forward"});
team.push({label: "Jimmy", data: "Power Forward"});
team.push({label: "Doug", data: "Center"});
 
//sort the array by the players name
 
team.sortOn("label");
 
//now we set the combo box to the main array we created using "data provider"
myCombo_cb.setDataProvider(team);
 
//now when a user selects a player, it will trace that players position
onSelect=function(){
 trace(myCombo_cb.getValue());
}



Ok, so now when we test the movie, the component still has all the information it had before, but now it is sorted by the player names.

That concludes the trilogy of array tutorials; I hope they have been helpful. I will be writing more tutorials soon, and am looking for some ideas, so if you have any, email them to me at
missing-link (at) evolutionar-e.com

 

Get new stories first

Click to follow us on Twitter!

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register