Just a quick little tutorial on how to create display nested categories from a database using recursion and components. This is the simplest way I've found to accomplish recursion in ColdFusion, but feel free to comment if you know a better way.

In this tutorial, we are working with a single table in a SQL database with 3 columns: id, parent, name.

Here is the database structure:


Create the component

Create a new component called categories.cfc, start with this structure:


As you may already know, recursion simply calls the same function from within itself. The beauty of using components is there is no need to number or name our function or objects because each call creates a new instance of the object.

Setup the query

In the code above, we've created a function called getCats, it accepts 1 argument: parent. We will use this argument to query for child categories.



Create the output

Now that we've setup a query to get all the nested (child) categories, we should setup the output. We'll do this by setting text to a output variable which will be returned. Remember, you should never need to display anything from inside your functions, it should be returned using cfreturn.



We did a lot in that step, but it's really pretty simple. We've looped over the query appending text to our output variable and using #CreateObject('component', 'categories').getCats(cats.id)# we call the component and function from within itself to get child categories for the category the query is currently on. After the loop is finished, we return the output variable.

Putting it on a page

Save your categories.cfc and create a new .cfm file. This is where you'll call your recursive function and display your categories in a nicely organized list.



We instantiate the categories component we just made and call the getCats function. When you created your table to query categories from, all of your root (top-level) categories should have a parent of 0, passing 0 to the parent argument starts at the very top of your nesting and begins to recurse down.

You should see something like this:

• Parent 1
• Child 1.1
• Child 1.2
• Child 1.2.1
• Child 1.2.1.1
• Child 1.2.1.1.1
• Child 1.2.1.2
• Child 1.2.1.3
• Child 1.2.1.3.1
• Parent 2

thanks for this tutorial! after hours of banging my head against a brick wall, i have a working script.

hello there,
i tried this and it works ok, but produces lots of empty UL's

please can you help me to sort them - an eg of this in action is here... www.organiclinker.com/test.cfm

thanks
Mike

This post has been edited by billybrag: 23 Aug, 2006 - 03:55 AM

You may need to add some code in the output to check for an empty value. Not sure why it would be outputting empty UL's. Do you have anything in your database that might cause this?!

No - not that i can see - all i have changed from your code is the variable names to match my db?

it seems to be a problem with the logic?

I made a few changes to skyhawk133's code so that it produces valid html. (see this url for an explanation of proper list nesting: http://www.w3schools.com/xhtml/xhtml_html.asp)

In skyhawk's original code the child ul's were not nested within the parent li's. There may be a more elegant way to do what I have done, so please chime in if you've got one.

skyhawk133: Thanks for the original post!

instead of Creating a new Object everytime, couldnt you change this line..

<cfset output = "#output# #CreateObject('component', 'categories').getCats(cats.id)#">


to just <cfset output = "#output# #getCats(cats.id)#">