Information can be represented many different ways. Numbers are typically converted into graphical charts to quickly show the basic information behind the figures. A tree construction is also very practical way to display sometimes complex information. Trees are especially handy with hierarchical data, but building a tree from simple two-dimensional data may require some effort. The key resolution to solve this is recursion. Recursive algorithms, of course, may not be the most efficient operations, but they certainly are compact and elegant piece of computer coding. Today’s dilemma includes a bunch of data rows retrieved from a database and the question is how to display this array as a tree. With popular PHP web programming language this is easy to solve.
Consider the following database table of some information.
| id | pid | title |
|---|---|---|
| 8 | 3 | Title 2.3 |
| 2 | 1 | Title 1.1 |
| 3 | 1 | Title 1.2 |
| 1 | 0 | Root |
| 9 | 6 | Title 3.1 |
| 4 | 1 | Title 1.3 |
| 6 | 3 | Title 2.1 |
| 7 | 3 | Title 2.2 |
| 5 | 1 | Title 1.4 |
The table has three columns. Id column is the unique identifier of the row. Pid column is a pointer that refers to the parent. If pid is 3, for example, it tells that row with id 3 is the parent of the row in question. There is one special case. If pid is zero, it is the root of the tree. Title column contains information to display in the tree. This table of rows can also be understood as an array. The goal is to convert this array into a tree representation as shown below.
Root
Title 1.1
Title 1.2
Title 2.3
Title 2.1
Title 3.1
Title 2.2
Title 1.3
Title 1.4The following short code does the trick.
// sample data
$arr = array();
$arr[] = array('id' => 8, 'pid' => 3, 'title' => 'Title 2.3');
$arr[] = array('id' => 2, 'pid' => 1, 'title' => 'Title 1.1');
$arr[] = array('id' => 3, 'pid' => 1, 'title' => 'Title 1.2');
$arr[] = array('id' => 1, 'pid' => 0, 'title' => 'Root');
$arr[] = array('id' => 9, 'pid' => 6, 'title' => 'Title 3.1');
$arr[] = array('id' => 4, 'pid' => 1, 'title' => 'Title 1.3');
$arr[] = array('id' => 6, 'pid' => 3, 'title' => 'Title 2.1');
$arr[] = array('id' => 7, 'pid' => 3, 'title' => 'Title 2.2');
$arr[] = array('id' => 5, 'pid' => 1, 'title' => 'Title 1.4');
// rearrange array
$r = array();
foreach ($arr as $v) {
$r[$v['pid']][] = array('id' => $v['id'], 'title' => $v['title']);
}
// recursive function
function arrayToTree($a, $start = 0) {
$result = '';
if (isset($a[$start])) {
$result .= "<ul>";
foreach ($a[$start] as $v) {
$result .= '<li id="li-' . $v['id'] . '">' . $v['title'] . arrayToTree($a, $v['id']);
}
}
if (!empty($result)) {
$result .= "</li></ul>";
}
return $result;
}
// show result
echo arrayToTree($r);The first part of the sample code sets up an array of data. This could be retrieved from a database. The next part makes a new array $r using parent id as the associative key and adding the rest of the original array as a new subarray. Finally, the recursive arrayToTree() function iterates through the array and makes the tree structure with ul (unordered list) and li elements. The resulting string is then returned and printed on a web page.
Final words
Displaying simple rows of data as a hierarchical tree is relatively easy with recursion and PHP language. This sample code only constructs the tree but does not sort the branches. Using PHP array sorting functions the tree is very easy to display ordered.