Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Working with Object Trees: Part Two

by Budi Kurniawan
05/04/2001

When working with objects in JavaScript, you don't have much choice other than to use the "array object." I described the basic concepts of the array object in my previous article. In this article, I'll explain the operations that you need to work with an object tree, such as create an object, append a child object to the root, search an object in the object tree, append an object to another object, and delete an object.

Creating an object

Of our interest is finding a way to make an array behave like an object. The createObject function in Listing 9 is a function that will return an object (which is technically an Array object, of course).


Listing 9: The createObject function to create an object


<script language="JavaScript">
function createObject() {
  var anArray = new Array();
  return anArray;
}
</script>


Alternatively, you can write a function that creates an object with predefined properties. For example, the createDog function in Listing 10 creates a dog object with a name and fur color.


Listing 10: A function that creates an object with predefined properties


<script language="JavaScript">
function createDog(name, color) {
  var dog = new Array();
  dog[0] = name;
  dog[1] = color;
  return dog;
}
</script>


A hierarchy of objects

Having a function to create objects, now you can have a hierarchy of objects. A hierarchy of objects means parent-child relationships among your objects. Consider, for instance, a Windows directory system. First you have a drive called the C drive. The C drive has a folder under it called Program Files. The Program Files folder is the child object of the C drive. The C drive is the parent of the Program Files folder. The Program Files folder in turn can have its own child objects.

In a hierarchy like this, there is always an object that does not have a parent. In the directory system example, it is the C drive. In many contexts, it is simply called the root. The root plays an important role because it is the entry point of the hierarchy. Every single operation will involve the root. For example, if you have a family tree of your dogs and you want to search for a dog called "Boni," the search starts from the root.

Appending a child object to another object

To create an object tree, you must have at least two objects, and you must create a parent-child relationship between them. Say, for example, a Dog object has a name, a color, and zero or more child Dog objects. You can use an array to represent the Dog object. The first and second elements are reserved for the name and color, and then the third and successive elements are for each child Dog object.

Therefore, a Dog object has at least two elements, i.e., its name and color. A Dog with no child object will only have two elements. A Dog with one child object has three elements: name, color, and a reference to another Dog object. If the Dog has two child objects, it then has the fourth element for yet another Dog object.

The important point here is to be able to create a Dog object and create a relationship between a parent and a child Dog object. You have seen the function to create an object in the previous section; now you need another function to append an object as a child object to another object. Just call this function append. The code for the append function is given in Listing 11.


Listing 11: The append function


<script language="JavaScript">
function append(parent, child) {
  parent[parent.length] = child;
}
</script>


Working with Object Trees

Go to Part one of this series

This function accepts two arguments: the object that will be the parent and the object that will be the child in the relationship. Since an array is completely dynamic, you can easily create a new element for the child object. The length property returns the number of elements, but the element index starts with 0. Therefore, the length property returns the index that is the next element in the array. For example, the code in Listing 12 creates two Dog objects called doggy and puppy and then creates a parent-child relationship between them.


Listing 12: Creating a parent object and a child object


<script language="JavaScript">

function createDog(name, color) {
  var dog = new Array();
  dog[0] = name;
  dog[1] = color;
  return dog;
}
function append(parent, child) {
  parent[parent.length] = child;
}

var doggy = createDog("boli", "black");
var puppy = createDog("boni", "white");
append(doggy, puppy);

</script>


If you are curious about the parent-child relationship between the two objects, paste this at the end of the code:


for (var i = 0; i<doggy.length; i++) {
  alert(doggy[i] );
}

Running the code in a Web browser, it will display three alert windows. The first alert window will display "boli," the second "black," and the third "boni,white."

Navigating the tree

Just assume that you have a family tree of Bo, the famous family dog. To simplify things, also assume that a dog only has one parent in the tree. Bo had two puppies: Boli and Boy. While Boy stayed a bachelor for the rest of his life, Boli later had two other puppies: Boni and Bulbul. Boni later had Spotty and Mary.

The dog family tree is visualized here.

Bo  -- Boli    -- Bulbul
               -- Boni    -- Spotty
                          -- Mary
    -- Boy

To create this tree, you need to first create individual dogs. And then, you need to build the tree structure by appending a child dog to its parent object. Listing 13 is the code to build Bo's family tree.


Listing 13: Creating a family tree


<html>
<script language="JavaScript">
function createDog(name, color) {
  var dog = new Array();
  dog[0] = name;
  dog[1] = color;
  return dog;
}
function append(parent, child) {
  parent[parent.length] = child;
}
var bo = createDog("bo", "brown");
var boli = createDog("boli", "black and white");
var boy = createDog("boy", "brown");
var bulbul = createDog("bulbul", "brown");
var boni = createDog("boni", "black and white");
var spotty = createDog("spotty", "black and white");
var mary = createDog("boni", "black and white");
append(bo, boli);
append(bo, boy);
append(boli, bulbul);
append(boli, boni);
append(boni, spotty);
append(boni, mary);
</script>
</html>


Pages: 1, 2, 3

Next Pagearrow