Databases
StackOverflow2013
Postsdbo
POConverting Array to UL LI
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConverting Array to UL LI
    primarykey
    data
    text
    <p>I can't for the life of me convert my array to a nested UL LI tree, I've been attempting it all day but there must be some flaw that I cannot spot (probably because my array isn't a very simple one).</p> <p>Basically the array takes the form:</p> <pre><code>$array = array( "0" =&gt; array( "0" =&gt; array("letter" =&gt; "A", "data" =&gt; "123"), "1" =&gt; array( "0" =&gt; array( "0" =&gt; array("letter" =&gt; "B", "data" =&gt; "123"), "1" =&gt; array( "0" =&gt; array( "0" =&gt; array("letter" =&gt; "C", "data" =&gt; "123") ) ) ), "1" =&gt; array( "0" =&gt; array("letter" =&gt; "D", "data" =&gt; "123"), "1" =&gt; array( "0" =&gt; array( "0" =&gt; array("letter" =&gt; "E", "data" =&gt; "123") ) ) ) ) ) ); </code></pre> <p><strong>Explaining Array Above</strong></p> <p>The arrays come in pairs - the first number being the group, and the second being the row. The above has 3 columns (or levels as I call them) and there is only has one 'group'.</p> <p>So <code>[0][0]</code> would be group 0, first row, <code>[0][1][0][0]</code> would be the second row of level one, but is the first row of level 2, and so one.</p> <p>Where basically I want the result to appear as follows (for the example above):</p> <pre><code>&lt;ul id="mylist"&gt; &lt;li&gt; &lt;ul class="initial"&gt; &lt;li&gt;A&lt;/li&gt; &lt;li class="top"&gt; &lt;ul class="wrap"&gt; &lt;li&gt; &lt;ul class="inner"&gt; &lt;li&gt;B&lt;/li&gt; &lt;li class="top"&gt; &lt;ul class="wrap"&gt; &lt;li&gt; &lt;ul class="inner"&gt; &lt;li&gt;C&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="end"&gt;&lt;a class="add"&gt;Add&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;ul class="inner"&gt; &lt;li&gt;D&lt;/li&gt; &lt;li class="top"&gt; &lt;ul class="wrap"&gt; &lt;li&gt; &lt;ul class="inner"&gt; &lt;li&gt;E&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="end"&gt;&lt;a class="add"&gt;Add&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="end"&gt;&lt;a class="add"&gt;Add&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="end"&gt;&lt;a class="add"&gt;Add&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Basically, an 'add' appears at the end of each node branch (last list item within 'wrap' class).</p> <p>I've done the following so far, but I feel it isn't correct at all, and doesn't work correctly if additional nodes were added or nodes were removed.</p> <pre><code>function recursion($data, $level){ $skip = array_key_exists('data', $data[0]) ? 0 : 1; if($skip == 0){ $level++; if($level !== 1){ $out .= "&lt;li&gt;\n"; } if($level == 1){ $out .= "&lt;ul class='initial'&gt;\n"; } else { $out .= "&lt;ul class='inner'&gt;\n"; } } $count = 0; $loop_count = 0; $show_end = 0; foreach($data as $key =&gt; $value){ $loop_count++; if(is_array($value) &amp;&amp; array_key_exists('data', $value)){ $count++; $out .= ($skip == 0) ? "&lt;li&gt;" : ""; if($value['data'] == "123"){ $out .= $value['letter']; } if(!is_array($data[($key+1)][0])){ $out .= "&lt;/li&gt;\n"; $out .= "&lt;li class=\"end\"&gt;&lt;a class=\"add\"&gt;Add&lt;/a&gt;&lt;/li&gt;\n"; $out .= "&lt;/ul&gt;\n"; $out .= "&lt;/li&gt;\n"; $out .= "&lt;/ul&gt;\n"; $out .= "&lt;/li&gt;\n"; $out .= "&lt;li class=\"end\"&gt;&lt;a class=\"add\"&gt;Add&lt;/a&gt;&lt;/li&gt;\n"; $show_end = 1; } $last_key = $key; } else if(is_array($value)){ $out.= recursion($value, $level); } if($show_end == 1){ $out .= "&lt;/ul&gt;\n"; } if(is_array($value) &amp;&amp; array_key_exists('data', $value) &amp;&amp; !is_array($data[($key+1)])){ $out .= "&lt;/li&gt;\n"; } if($show_end == 1 &amp;&amp; count($data) !== $count){ $out .= "&lt;li&gt;\n"; } } return $out; } </code></pre> <p><strong>Output of <pre> print_r($array, true) </pre></strong></p> <pre><code>Array ( [0] =&gt; Array ( [0] =&gt; Array ( [letter] =&gt; A [data] =&gt; 123 ) [1] =&gt; Array ( [0] =&gt; Array ( [0] =&gt; Array ( [0] =&gt; Array ( [letter] =&gt; B [data] =&gt; 123 ) [1] =&gt; Array ( [0] =&gt; Array ( [0] =&gt; Array ( [letter] =&gt; C [data] =&gt; 123 ) ) ) ) [1] =&gt; Array ( [0] =&gt; Array ( [letter] =&gt; D [data] =&gt; 123 ) [1] =&gt; Array ( [0] =&gt; Array ( [0] =&gt; Array ( [letter] =&gt; E [data] =&gt; 123 ) ) ) ) ) ) ) ) </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMrJ
    1. USMrJ
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POConverting Array to UL LI
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POConverting Array to UL LI
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan it be in javascript? (using jQuery?)
      singulars
      1. POConverting Array to UL LI
      1. USMichael
    2. COSpend some more time explaining your data structure in your question, IMO.
      singulars
      1. POConverting Array to UL LI
      1. USFtDRbwLXw6
    3. CO@Michael Javascript? Potentially - belongs as it can display the tree correctly
      singulars
      1. POConverting Array to UL LI
      1. USMrJ
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload