Multidimensional array to HTML unordered list

Question

I have the following array which I want to transform into an unordered list (HTML).

Array
(
    [0] => Array
        (
            [url] => /
            [id] => 53a8717fe9ab5
            [template] => home
            [title] => Home
        )

    [1] => Array
        (
            [url] => /about
            [id] => 53a871fe8b05b
            [template] => content
            [title] => About
        )

    [2] => Array
        (
            [url] => /about/sub
            [id] => 53cb88b7ed22d
            [template] => content
            [title] => About (sub)
        )

    [3] => Array
        (
            [url] => /about/sub/subsub
            [id] => 53cb88bc7d32d
            [template] => content
            [title] => About (subsub)
        )

    [4] => Array
        (
            [url] => /contact
            [id] => 53a8718981161
            [template] => content
            [title] => Contact us
        )

)

So I'm trying to create a multidimensional array from the one above which looks like this:

Array
(
    [0] => /
    [1] => /about
    [about] => Array
        (
            [0] => /about/sub
            [sub] => Array
                (
                    [0] => /about/sub/subsub
                )

        )

    [2] => /contact
)

But that's as far as I'm getting... Let alone the creation of the actual <ul>.

Any help would be very much appreciated.

EDIT

I generated the recursive <ul> using:

private function generateTree($from) {
    $to = [];

    foreach ( $from as $element ) {
        $path = explode('/', $element["url"]);
        if ( count($path) === 1 ) array_unshift($path, '/');

        $_to = &$to;
        for ( $i = 0; $i < count($path)-1; $i++ ) {
            if ( !array_key_exists($path[$i], $_to) ) $_to[$path[$i]] = [];
            $_to = &$_to[$path[$i]];
            print_r ( implode("/", $path));
            echo "<br>";
        }
        $_to[] = $element["url"];
    }

    return $to[""];
}

And this is my expected output:

<ul>
    <li><a href="/">Home</a></li>
    <li>
        <a href="/about">About</a>
        <ul>
            <li>
                <a href="/about/sub">About (sub)</a>
                <ul>
                    <li><a href="/about/sub/subsub">About (subsub)</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="/contact">Contact</a></li>
</ul>

Take a look at any of the templating libraries available for PHP. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jul 21, 2014 at 13:06
I would like to do it without a library. It's more of a learning experience ;) If you mean for examples; mind giving me a starting point? — Cas Cornelissen
– Cas Cornelissen, Commented Jul 21, 2014 at 13:11

Joanvo · Accepted Answer · 2014-07-21 14:39:06Z

4

Try a function like this:

function ToUl($input){
   echo "<ul>";

   $oldvalue = null;
   foreach($input as $value){
     if($oldvalue != null && !is_array($value))
        echo "</li>";
     if(is_array($value)){
        ToUl($value);
     }else
        echo "<li>" + $value;
      $oldvalue = $value;
    }

    if($oldvalue != null)
      echo "</li>";

   echo "</ul>";
}

[Edit]

I'll leave the function which creates a li for every array, which is simpler, in case any reader needs it:

function ToUl($input){
   echo "<ul>";

   foreach($input as $value)
     if(is_array($value)){
        echo "<li>";
        ToUl($value);
        echo "</li>";
     }else
        echo "<li>" + $value + "</li>";

   echo "</ul>";
}

edited Jul 21, 2014 at 14:39

answered Jul 21, 2014 at 13:12

Joanvo

5,8272 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cas Cornelissen Over a year ago

The problem with this would be that the <ul> would get placed after the closing </li> of it's parent. I want it to be inside the <ul>.

Cas Cornelissen Over a year ago

Now it gets its own <li>. I want it to be inside the <li> of the parent.

Joanvo Over a year ago

Can you put a sample html of the output you are looking for?

Cas Cornelissen Over a year ago

I edited my original question and added the expected output ;)

Collectives™ on Stack Overflow

Multidimensional array to HTML unordered list

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related