Create dynamic html markup from values in repeatable field json

Question

In my custom component, I use a repeatable field.

Sometimes it is possible that a url_partenaire element is an empty string because it is not mandatory.

var_dump($this->item->logo_repeatable_list) gives this:

string(157) "{
"logo": 
["images/website_logo_1.png","images/website_logo_2.png","images/website_logo_3.png"],
"url_partenaire": 
["","https://www.url_website_2.fr",""]
}"

I need to create this:

<img src="images/website_logo_1.png">
<a href="https://www.url_website_2.fr"><img src="images/website_logo_2.png"></a>
<img src="images/website_logo_3.png">

I begin with this, but it works only if there is one field in the repeatable field:

<?php
$jsonPartenaires = json_decode($this->item->logo_repeatable_list, true);
?>

<?php foreach ($jsonPartenaires as $key => $value) {
    foreach ($value as $content) echo '<img src="'. $content . '">';
}
?>

I don't really know what to do now.

Answer 1

Since your logos and urls exist in pairs, you can use a single loop over the logos and access the urls via the shared index.

Code: (Demo)

foreach ($jsonPartenaires['logo'] as $i => $logo) {
    $html = sprintf('<img src="%s">', $logo);
    if ($jsonPartenaires['url_partenaire'][$i]) {
        $html = sprintf(
            '<a href="%s">%s</a>',
            $jsonPartenaires['url_partenaire'][$i],
            $html
        );
    }
    echo $html . "<br>";
}

Output: (tabbed and spaced for readability)

<img src="images/website_logo_1.png">
<br>
<a href="https://www.url_website_2.fr">
    <img src="images/website_logo_2.png">
</a>
<br>
<img src="images/website_logo_3.png">
<br>

Using printf() or sprintf() (the silent version), enables you to bind variables to a string without the noise of string concatenation or interpolation. If you ever want to call a string function on a variable (to prepare the strings, you can just wrap the parameters containing variables in the desired function(s).

---

I'll admit that in my own project, I'd probably use functional syntax. This allows you to cleanly join the html elements with <br> with no trailing <br>.

Code: (Demo)

echo implode(
         "<br>",
         array_map(
             function($logo, $url) {
                 $html = sprintf('<img src="%s">', $logo);
                 if ($url) {
                     $html = sprintf('<a href="%s">%s</a>', $url, $html);
                 }
                 return $html;
             },
             $jsonPartenaires['logo'],
             $jsonPartenaires['url_partenaire']
         )
     );

Answer 2

If you have only 2 arrays (URLs and logos), you can use array_combine() to create an array with one as the key and the other as value:

$data = array_combine($jsonPartenaires['url_partenaire'], $jsonPartenaires['logo']);

foreach ($data as $url => $logo) {
    echo '<a href="' . $url . '"><img src="'. $logo . '"></a>';
}