Show more than two values from array

Question

I have the following fields in a component:

<fieldset name="carousel_container">
    <field name="carousel" type="Repeatable" icon="list" description="" label="Carousel" default="">
        <fields name="params">
            <fieldset hidden="true" name="list_templates_modal" repeat="true">
                <field name="carouselimage" type="media" directory="" />
                <field name="carouselcaption" type="text" label="Caption" filter="raw" class="inputbox"  />
                <field name="carouselimagealt" type="text" label="Alt" filter="raw" class="inputbox"  />
            </fieldset>
        </fields>
    </field>
</fieldset>

This then saves JSON to the database as follows:

{
    "carouselimage":  ["images/1060333.jpg","images/2012861.jpg","images/2024459.jpg"],
    "carouselcaption":["This is a caption","Another caption","and another on"],
    "carouselimagealt":["alt text one","alt text two","alt text three"]
}

I then get the repeatable field value and decode it:

$carousel_images = array_combine($carousel_images['carouselimage'], $carousel_images['carouselcaption']);

Then do the following:

    // loop the result
    $count = 0;
    foreach ($carousel_images as $image => $caption) {
      $count++;

      // do something clever for each of the images
      if ($count == 1) {
        echo '<div class="carousel-item active">';
      } else {
        echo '<div class="carousel-item">';
      }

      echo
      '<img class="d-block w-100" src="' . $image . '" alt="WHAT VALUE HERE?">
      <div class="caption">' . $caption . '' . $count . '</div>

      </div>';
    }

This works and shows 'carouselimage' and 'carouselcaption' but how can I get it to give me the value of 'carouselimagealt' in order for me being able to call it in html?

Answer 1

Been a while since I used repeatable form fields (deprecated and subform fields should be used instead), but if I rightly remember, the repeatable form fields response format was a little different. It grouped each column in an array rather than each row.

So what you'll need to do is define a function to group the values by key:

function groupByKey($array) 
{
    $result = [];

    foreach ($array as $key => $value) 
    {
        foreach ($value as $k => $v) 
        {
            $result[$k][$key] = $v;
        }
    }
    return $result;
}

Get the carousel parameters:

$carousel = json_decode($params->get('carousel'), true);
$carouselItems = groupByKey($carousel);

Iterate over the array of carousel items:

foreach ($carouselItems as $item)
{
    echo $item['carouselimage'];
    echo $item['carouselcaption'];
    echo $item['carouselimagealt'];
}