An algorithm for preparing array data for a different structure to display specific HTML output with some rules

Question

please, for a long time I could not find a solution to this problem (it’s very difficult for me), and I really appreciate any help:

1) I have data in a simple array like this, no problem:

$data = array( array('id => 1', 'name' => 'Some name 1'), array('id => 2', 'name' => 'Some name 2'), array('id => 3', 'name' => 'Some name 3'), ... ); 

2) But I have to display the above data in an HTML structure, theoretically very similar to a tree structure in which each parent has a maximum of 4 sheets, and each node can become a parent for the next 4 children (without any restrictions on the depth of the tree )

a) Therefore, if I have only 4 elements in the array, the following is displayed on the website:

 <div class="group"> <div class="group"><a href="#">Item 1</a></div> <div class="group"><a href="#">Item 2</a></div> <div class="group"><a href="#">Item 3</a></div> <div class="group"><a href="#">Item 4</a></div> </div> 

b) In the case of 5 elements, this should be shown as follows:

 <div class="group"> <div class="group"><a href="#">Item 1</a></div> <div class="group"><a href="#">Item 2</a></div> <div class="group"><a href="#">Item 3</a></div> <div class="group"> <div class="group"><a href="#">Item 4</a></div> <div class="group"><a href="#">Item 5</a></div> </div> </div> 

c) In the case of 6 elements, this should be shown as follows:

 <div class="group"> <div class="group"><a href="#">Item 1</a></div> <div class="group"><a href="#">Item 2</a></div> <div class="group"> <div class="group"><a href="#">Item 3</a></div> <div class="group"><a href="#">Item 4</a></div> </div> <div class="group"> <div class="group"><a href="#">Item 5</a></div> <div class="group"><a href="#">Item 6</a></div> </div> </div> 

d) In the case of 16 elements, this should be shown as follows:

 <div class="group"> <div class="group"> <div class="group"><a href="#">Item 1</a></div> <div class="group"><a href="#">Item 2</a></div> <div class="group"><a href="#">Item 3</a></div> <div class="group"><a href="#">Item 4</a></div> </div> <div class="group"> <div class="group"><a href="#">Item 5</a></div> <div class="group"><a href="#">Item 6</a></div> <div class="group"><a href="#">Item 7</a></div> <div class="group"><a href="#">Item 8</a></div> </div> <div class="group"> <div class="group"><a href="#">Item 9</a></div> <div class="group"><a href="#">Item 10</a></div> <div class="group"><a href="#">Item 11</a></div> <div class="group"><a href="#">Item 12</a></div> </div> <div class="group"> <div class="group"><a href="#">Item 13</a></div> <div class="group"><a href="#">Item 14</a></div> <div class="group"><a href="#">Item 15</a></div> <div class="group"><a href="#">Item 16</a></div> </div> </div> 

e) In the case of 21 elements, this should be shown as follows:

 <div class="group"> <div class="group"> <div class="group"><a href="#">Item 1</a></div> <div class="group"><a href="#">Item 2</a></div> <div class="group"><a href="#">Item 3</a></div> <div class="group"> <div class="group"><a href="#">Item 4</a></div> <div class="group"><a href="#">Item 5</a></div> </div> </div> <div class="group"> <div class="group"><a href="#">Item 6</a></div> <div class="group"><a href="#">Item 7</a></div> <div class="group"><a href="#">Item 8</a></div> <div class="group"> <div class="group"><a href="#">Item 9</a></div> <div class="group"><a href="#">Item 10</a></div> </div> </div> <div class="group"> <div class="group"><a href="#">Item 11</a></div> <div class="group"><a href="#">Item 12</a></div> <div class="group"><a href="#">Item 13</a></div> <div class="group"> <div class="group"><a href="#">Item 14</a></div> <div class="group"><a href="#">Item 15</a></div> </div> </div> <div class="group"> <div class="group"><a href="#">Item 16</a></div> <div class="group"><a href="#">Item 17</a></div> <div class="group"><a href="#">Item 18</a></div> <div class="group"> <div class="group"><a href="#">Item 19</a></div> <div class="group"><a href="#">Item 20</a></div> <div class="group"><a href="#">Item 21</a></div> </div> </div> </div> 

The above examples are intended for a complete protective screen divided into 4 main equal areas, and these 4 areas can also contain a maximum of 4 areas inside, and each of these areas can also contain the following 4 areas, etc. etc.

If the total count of the number of elements modulo 4 is 0 than on the website, there will be the same areas of width and height, but otherwise some areas are larger and some are divided into more children and the HTML described above for this purpose -code works fine (on a static page it is well tested).

So, I have a big problem to find how to convert simple array data into some structure, well processed with any recursive function or something else to make the desired results.

But, as I wrote, I do not have time, mainly because each new child container must be created from the last structure to run and evenly for each of the four main quadrants.

I am here to be helpful in answering your questions, if it will be so pleasant for you to help me :)

I know it's a little hard to describe it clearly enough ...

Answer 1

It was a little harder than I expected because of how you wanted to distribute your items. But that should do the trick.

The arrangeGroups() function will create a nested array as you describe. You should have no problem creating a function that displays this data as nested divs.

I added some setup code to dynamically generate as many array entries as you want. Easier to test.

 define('GROUP_SIZE', 4); $things = array(); for($idx=1; $idx<=21; $idx++) $things[] = array( 'id'=>$idx, 'name'=>"Some name $idx" ); $groups = arrangeGroups($things); print_r($groups); function arrangeGroups($items) { $tempGroups = array(); $itemCount = count($items); // we use this a lot. // The hardest part here is figuring out how many items go into each group. // Build an array of how big each subgroup should be. // Put all the remainder items at the end of the array. // Six items divided into four groups will yield the array // (1, 1, 2, 2) $groupings = array_fill(0, GROUP_SIZE, intval($itemCount/GROUP_SIZE)); $remainder = $itemCount % GROUP_SIZE ; for ($idx=$remainder; $idx>0; $idx--) $groupings[GROUP_SIZE-$idx]++; // now we just create slices of the array we were given, using $groupings as our guide $offset = $idx = 0; do { $sliceSize = $groupings[$idx]; if ( $sliceSize == 1 ) $tempGroups[] = $items[$offset]; else if ( $sliceSize > 1 ) $tempGroups[] = arrangeGroups( array_slice($items, $offset, $sliceSize) ); $offset += $sliceSize; $idx++; } while ($idx < GROUP_SIZE); return $tempGroups; }