How can i display only the first image from this JSON array? - php

Question

OK, I'm trying to integrate an API that lists adoptable pets into a wordpress website. I've done lots of googling and read through tutorials, and so far have managed to put together a super basic plugin that seems to do what I'm trying to accomplish. Currently I'm trying to pull in an image, but just the first image. Each animal may have 5 images associated with it, but I only want to pull in the first (default). Currently my code brings them all. Now I realize the problem is that I'm using "foreach()". But, this is new to me and my googling is not going well, and any other way I've tried to do it is just not getting me ANY pictures. Any advice is appreciated....and if I'm doing anything else wrong, feel free to let me know :) I also need to figure out how to paginate it, but I'm thinking that's a separate question! Thanks!
<?php
add_shortcode('pets', 'petsshortcode');
function petsshortcode() {
$request = wp_remote_get( 'https://petstablished.com/api/v2/public/pets?public_key=UlEK4EWvDAoOjXeQXSCQZAyBywWfqfOg&search[status]=available,foster&pagination[limit]=20&pagination[page]=1' );
if( is_wp_error( $request ) ) {
return false; // Bail early
}
$body = wp_remote_retrieve_body( $request );
$data = json_decode( $body );
if( ! empty( $data ) ) {
foreach( $data->collection as $collection ) {
echo '<div id="pet-block"><ul class="pet-profile"><li class="pet-name">'. $collection->name; echo '</li>';
echo '<li class="pet-meta">'.'<span class="sex">' . $collection->sex; echo '</span>' . '<span class="breed">' . $collection->breed; echo '</span><span class="age">' . $collection->age; echo '</span></li>';
echo '<li><p>' . $collection->description; echo '</li></p>';
foreach( $collection->images as $images ) {
echo '<div class="pet-photo"><img src="' . $images->image->url; echo '" width="200"></div>';}
echo '</ul></div>';
}
}
}

Answer 1

You don't need nested foreach loops in this case, simply use just one foreach loop like this:
// your code
foreach( $data->collection as $collection ) {
echo '<div id="pet-block"><ul class="pet-profile"><li class="pet-name">'. $collection->name; echo '</li>';
echo '<li class="pet-meta">'.'<span class="sex">' . $collection->sex; echo '</span>' . '<span class="breed">' . $collection->breed; echo '</span><span class="age">' . $collection->age; echo '</span></li>';
echo '<li><p>' . $collection->description; echo '</li></p>';
echo '<div class="pet-photo"><img src="' . $collection->images[0]->image->url; echo '" width="200"></div>';
echo '</ul></div>';
}
// your code