Wrap every 3 items and add a div - for each problem-CodePudding

I want to wrap every 3 items and add a div (.expanded row) after these, then continue with the other rows and repeat the same. This has to the be output:

<div >
  <div >name 1</div>
  <div >name 2</div>
  <div >name 3</div>
</div>

<div >      
  <div  id="item-1">name 1</div>
  <div  id="item-2">name 2</div>
  <div  id="item-3">name 3</div>
</div>

<div >
  <div >name 4</div>
  <div >name 5</div>
  <div >name 6</div>
</div>

<div >      
  <div  id="item-5">name 4</div>
  <div  id="item-6">name 5</div>
  <div  id="item-7">name 6</div>
</div>

This is the function I'm using to try get it:

<?php // check if the repeater field has rows of data
  if( have_rows('content') ):
  // loop through the rows of data

  // add a counter
  $counter = 0;
  $group = 0;
  // Content Array
  $content_array = array();
  while ( have_rows('content') ) : the_row(); 


    $name = get_sub_field('feature_name');
    $expandedInfo = get_sub_field('feature_info');
    // Adding the Expanded Info
    $content_array[ 'item-' . $counter ] = $expandedInfo;
    if ($counter % 3 == 0) {
      $group  ;
    ?>
      <div >
    <?php 
    }
  ?>
  <div >
    <?php echo $name ?>
  </div><!-- item-->


  <?php 
    if ($counter % 3 == 2) {
    ?>
      </div><!-- intro-->
      <div >
        <?php 

        foreach( $content_array as $item_id => $expanded_info ) {

          echo '<div  id="' . $item_id . '">';
          echo $expanded_info;
          echo $name;
          echo '</div>';

        } ?>
      </div>
      <?php 
      // Resetting the Array
      $content_array = array();
    }
    $counter  ;
    endwhile;
  else :
  // no rows found
  endif;

  ?>

The problem I have is that the for each function only shows the last $name (name 3 and name 6) on the expanded row and therefore this is the output I have right now, any idea what the problem is and how to solve it?

<div >
  <div >name 1</div>
  <div >name 2</div>
  <div >name 3</div>
</div>

<div >      
  <div  id="item-1">name 3</div>
  <div  id="item-2">name 3</div>
  <div  id="item-3">name 3</div>
</div>

<div >
  <div >name 4</div>
  <div >name 5</div>
  <div >name 6</div>
</div>

<div >      
  <div  id="item-5">name 6</div>
  <div  id="item-6">name 6</div>
  <div  id="item-7">name 6</div>
</div>

CodePudding user response：

I'm quite sure it's because your foreach() exists inside the if($counter % 3 == 2) statement and $name does not exist in $content_array, so the value of $name is always of iteration $counter % 3 == 2 and will echo as many times as the length of $content_array.

I must say, this loop construction is not very robust and readable. Consider rewriting your loop in a more "best practice" and scalable way. I don't know what your user/cms functions do on the background, so it's hard to point you to another approach. Also, try to properly escape everything you echo on the page. But that's all off topic.

So to the point, for a quick fix, try to include $name in $content_array like:

$content_array[ 'item-' . $counter ] = array( $expandedInfo, $name );

Then change your foreach() to this:

foreach ( $content_array as $item_id => $info_and_name ) {
    echo '<div  id="' . $item_id . '">';
    echo $info_and_name[0];
    echo $info_and_name[1];
    echo '</div>';
}

I think that should do it ;)