Get image url from post in rest api

Im making a Gutenberg block that is going to show a post feed for another website. So I'm importing the posts from the website Rest API. The Rest API contains an ID of an image, but not the url of the image. The solution I thought would work was to also import the media endpoint, and then match the id of the media with the id I get from the Post endpoint.

This is the code I have now:

<?php

// Create class attribute allowing for custom "className" and "align" values.
$className = 'post-feed';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

$url = "https://mintmedia.no/wp-json/wp/v2/nyheter";
$url2 = "https://mintmedia.no/wp-json/wp/v2/media";

$curl = curl_init($url);
$curl2 = curl_init($url);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl2, CURLOPT_URL, $url2);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl2, CURLOPT_RETURNTRANSFER, true);

$resp = curl_exec($curl);
$resp2 = curl_exec($curl2);
curl_close($curl);
curl_close($curl2);

$array = json_decode($resp);
$array2 = json_decode($resp2);

?>

<?php if (!$array) { ?>
    <p>Ingen ordre å vise her!😔</p>
<?php } else { ?>

    <div class="<?php echo esc_attr($className); ?>">
        <?php foreach ($array as $key=>$article) {
            foreach ($array2 as $key=>$media) {
                if( $article->meta->teft_cards_image_id == $media->id ) { 
                    $image=$media->guid->rendered;
                } 
            } ?>
            <div class="arcicle-card">
                <img src="<?php echo $image ?>" />
                <h2><?php echo $article->title->rendered ?></h2>
            </div>
        <?php } ?>
    </div>

<?php } ?>

The problem now is that the first post I show get the right image, but every post after gets the same image as the first post. Is there something wrong with my loops. Or is there a better way of solving this, that I haven't thought about?

Thanks!

Solution

I found a much easier solution!

<?php

// Create class attribute allowing for custom "className" and "align" values.
$className = 'post-feed';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

$url = "https://mintmedia.no/wp-json/wp/v2/nyheter/?per_page=9";

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

$resp = curl_exec($curl);
curl_close($curl);

$array = json_decode($resp);

?>

<?php if (!$array) { ?>
    <p>Ingen ordre å vise her!😔</p>
<?php } else { ?>

    <div class="<?php echo esc_attr($className); ?>">
        <?php foreach ($array as $key=>$article) {
            $getimage = file_get_contents("https://mintmedia.no/wp-json/wp/v2/media/{$article->meta->teft_cards_image_id}");
            $image = json_decode($getimage); ?>
            <div class="article-card">
                <a href="<?php echo $article->link; ?>" target="_blank">
                    <div class="article-image">
                        <img src="<?php echo $image->guid->rendered; ?>">
                    </div>
                    <h2><?php echo $article->title->rendered; ?></h2>
                    <p>
                        <?php 
                            $timestamp = strtotime($article->date);
                            $new_date = date("F j, Y", $timestamp);
                            echo $new_date;
                        ?>
                    </p>
                </a>
            </div>
        <?php } ?>
    </div>

    <div class="button-div">
        <a href="https://mintmedia.no/nyheter" target="_blank"><button>Finn flere nyhetssaker på vår hjemmeside</button></a>
    </div>

<?php } ?>