Break PHP array into 5 colums

Question

How to achieve inside navigation menu like below:

I have to use all colums if value are greater than 5. i get data from foreach loop and i want to make structure like below. I have to do using foreach loop.

<?php
    $customArray = array('abc','def','ghi','jkl','mno','pqr');
    $col = 5;
    $menus = count($customArray);
?>

I want structure like below just for example if 6 array value then look like below,

<?php foreach($customArray as $key=>$value) {?>
     <ul class="test">
        <li class="0">
            <ul>
                <li>abc</li>
                <li>def</li>
            </ul>
        </li>
        <li class="1">ghi</li>
        <li class="2">jkl</li>
        <li class="3">mno</li>
        <li class="4">pqr</li>
    </ul> 
<?php } ?>

if array value are 7 then structure look like below,

 <?php foreach($customArray as $key=>$value) {?>
     <ul class="test">
        <li class="0">
            <ul>
                <li>abc</li>
                <li>def</li>
            </ul>
        </li>
        <li class="1">
            <ul>
                <li>ghi</li>
                <li>jkl</li>
            </ul>
        </li>
        <li class="2">mno</li>
        <li class="3">pqr</li>
        <li class="4">stu</li>
    </ul>
 <?php } ?>

if array value are 8 then,

<ul class="test">
    <li class="0">
        <ul>
            <li>abc</li>
            <li>def</li>
        </ul>
    </li>
    <li class="1">
        <ul>
            <li>abc</li>
            <li>def</li>
        </ul>
    </li>
    <li class="2">
        <ul>
            <li>abc</li>
            <li>def</li>
        </ul>
    </li>
    <li class="3">abc</li>
    <li class="4">abc</li>
</ul>

if array value are 9 then,

<ul class="test">
    <li class="0">
        <ul>
            <li>abc</li>
            <li>def</li>
        </ul>
    </li>
    <li class="1">
        <ul>
            <li>abc</li>
            <li>def</li>
        </ul>
    </li>
    <li class="2">
        <ul>
            <li>abc</li>
            <li>def</li>
        </ul>
    </li>
    <li class="3">
        <ul>
            <li>abc</li>
            <li>def</li>
        </ul>
    </li>
    <li class="4">abc</li>
</ul>

How to achieve this type of structure.

Possibly useful for you to work it out: array_chunk(), array_column() — Mark Baker
– Mark Baker, Commented May 4, 2016 at 13:35
but i have coming data from foreach loop.can you give me example for that? — Rakesh Jesadiya
– Rakesh Jesadiya, Commented May 4, 2016 at 13:36
Split your $customArray using array_chunk() then iterate over that result... if the value has only one entry, display that entry; otherwise display the multiple entries in your li tags — Mark Baker
– Mark Baker, Commented May 4, 2016 at 13:41
using array_chunk, my problems not solved because if i use size 2 then only three column is used. i have to used all column if value are greater than 5. — Rakesh Jesadiya
– Rakesh Jesadiya, Commented May 4, 2016 at 13:43
Do you basically want to distribute the elements throughout the menu equally? — nerdlyist
– nerdlyist, Commented May 4, 2016 at 13:53

billyonecan · Accepted Answer · 2016-05-04 14:35:04Z

You could do something like this:-

while (! empty($customArray)) {
  $chunks[] = array_splice($customArray, 0, ceil(count($customArray) / $cols--));
}

So keep splitting the array, and decrementing the number of available $cols until $customArray is empty.

For example say $customArray has 6 entries:

1st iteration: ceil(6 / 5) = 2
2nd iteration: ceil(4 / 4) = 1
3rd iteration: ceil(3 / 3) = 1
4th iteration: ceil(2 / 2) = 1
5th iteration: ceil(1 / 1) = 1

If $customArray had 9 entries:

1st iteration: ceil(9 / 5) = 2 
2nd iteration: ceil(7 / 4) = 2
3rd iteration: ceil(5 / 3) = 2
4th iteration: ceil(3 / 2) = 2
5th iteration: ceil(1 / 1) = 1

Output using $customArray = range('A', 'Z') (26 entries)

Array
(
    [0] => Array
        (
            [0] => A
            [1] => B
            [2] => C
            [3] => D
            [4] => E
            [5] => F
        )

    [1] => Array
        (
            [0] => G
            [1] => H
            [2] => I
            [3] => J
            [4] => K
        )

    [2] => Array
        (
            [0] => L
            [1] => M
            [2] => N
            [3] => O
            [4] => P
        )

    [3] => Array
        (
            [0] => Q
            [1] => R
            [2] => S
            [3] => T
            [4] => U
        )

    [4] => Array
        (
            [0] => V
            [1] => W
            [2] => X
            [3] => Y
            [4] => Z
        )

)

Then you can just loop over to output it:

foreach ($chunks as $key => $chunk) {
  echo '<li class="' . $key . '">';
  if (count($chunk) == 1) {
    echo $chunk[0];
  } else {
    echo '<ul><li>'. implode('</li><li>', $chunk) . '</li></ul>';
  }
  echo '</li>';
}

Complete example:

$customArray = range(1, 100);
$cols = 5;
$chunks = array();

while (! empty($customArray)) {
  $chunks[] = array_splice($customArray, 0, ceil(count($customArray) / $cols--));
}

foreach ($chunks as $key => $chunk) {
  echo '<ul class="' . $key . '">';
  echo (count($chunk) == 1) ? $chunk[0] : '<ul><li>' . implode('</li><li>', $chunk) . '</li></ul>';
  echo '</ul>';
}

Rakesh Jesadiya · Accepted Answer · 2016-06-17 09:31:42Z

Using JS this can be solved,

var levelArray = [];
        var mainLi = 5;

        for(menu=1; menu <= mainLi; menu++){
            var getLi = jQuery(".test");

            if(getLi.length > 0){

                for ( var i = 0; i < getLi.length; i++ ) {      
                    levelArray.push( getLi[i] );
                }
                cols = 5;
                var finalLevelArray = levelArray.length;
                var chunks = [];

                if(finalLevelArray >= 5){
                    loopRepeat = 5;
                }else{
                    loopRepeat = finalLevelArray;
                }

                for(i=0;i<loopRepeat;i++){      
                    chunks.push(levelArray.splice(0, Math.ceil(levelArray.length / cols--)));
                }

                var textArr = '';
                jQuery.each(chunks, function( index, element ){
                    textArr += '<li class="menu-col">';
                    if(element.length == 1){            
                        textArr += chunks[index][0].innerHTML;
                    }else{          
                        textArr += '<ul>';
                        for(j=0; j<element.length; j++){
                             textArr += '<li class="subs">'+chunks[index][j].innerHTML+'</li>';
                        }
                        textArr += '</ul>';
                    }
                    textArr += '</li>';
                });

                jQuery(".test").children().remove();
                jQuery(".test").html(textArr);
            } 
        }

Collectives™ on Stack Overflow

Break PHP array into 5 colums

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related