How can i display my preg_match results in various divs so they can have multiple results under the correct heading?

Forgive me if this is simple but I have a for each loop that searches JSON data for results from a search. I then have some preg_match statements that will look at some of the tags within the JSON and if their is a match display the thumbnail in a div. and currently this all works. But it currently displays every result in its own Div and i want just five divs with multiple images within if there is a match.

foreach ($hits as $hit)
{
  
  $target = $hit->metadata->baseName;
  $target1 = $hit->metadata->cf_imageType;

  if(preg_match("/_cm/i",$target)) {
    echo '<div id="div5">';
    echo '<h2>Creative</h2>';
    echo "<img src='" . $hit->thumbnailUrl . "' alt='error'>";
    echo $hit->metadata->baseName; 
    echo '</div>';
  }
  if(preg_match("/_SS/i",$target)) {
    echo '<div id="div6">';
    echo '<h2>Styled</h2>';
    echo "<img src='" . $hit->thumbnailUrl . "' alt='error'>";
    echo $hit->metadata->baseName; 
    echo '</div>';
  }
  if(preg_match("/_SH/i",$target)) {
    echo '<div id="div7">';
    echo '<h2>Group</h2>';
    echo "<img src='" . $hit->thumbnailUrl . "' alt='error'>";
    echo $hit->metadata->baseName; 
    echo '</div>';
  }
  if(preg_match("/still life/i",$target1) && preg_match("/_sm_00|_sd_00/i",$target)) {
    echo '<div id="div8">';
    echo '<h2>Cutout</h2>';
    echo "<img src='" . $hit->thumbnailUrl . "' alt='error'>";
    echo $hit->metadata->baseName; 
    echo '</div>';
  }
  if(preg_match("/worn/i",$target1)) {
    echo '<div id="div9">';
    echo '<h2>Worn</h2>';
    echo "<img src='" . $hit->thumbnailUrl . "' alt='error'>";
    echo $hit->metadata->baseName; 
    echo '</div>';
  }
}

I cant quite figure out how to accomplish this, would it be the case of putting the results into an array and then displaying the results within the div?

Any help would be greatly appreciated.

Answer

You are right and answered the question yourself 🙂

Collect the results in a first step and create the markup in a second step. Something like this will do it:

$creative = [];
$styled   = [];

/* ... */

function getHitInfos($theHit)
{
    return [
      "url" => $theHit->thumbnailUrl,
      "name" => $theHit->metadata->baseName
    ];
}

function printResults($results, $title) {
    echo '<div>';
    echo '<h2>'.$title.'</h2>';

    foreach ($results as $key => $val) {
        echo "<img src='" . $val["url"] . "' alt='error'>";
        echo $val["name"]; 
    }
    echo '</div>';
}

foreach ($hits as $hit)
{
    $target  = $hit->metadata->baseName;
    $target1 = $hit->metadata->cf_imageType;

    echo '<div>';
    if(preg_match("/_cm/i",$target)) {
      $creative[] = getHitInfos($hit)
    }
    if(preg_match("/_SS/i",$target)) {
      $styled[] = getHitInfos($hit)
    }

    /* ... */
}

printResults($creative, "Creative");
printResults($styled, "Styled");

/* ... */

Disclaimer: My last contact with php is some years ago, but I hope you will see the point here. (I also created some helping functions to DRY the code)