Request wp_remote_get from a dynamic url (not a json file)

I'm currently trying to fetch data from an external source (not a Wp site) to a Wp site using the wp_remote_get method. The site that i want to get data from doesn't have an actual json file to make the call instead they provide this link to make the request (https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139. I'm using the below code to make the call. Is there a way to parse the response in php with html elements so i can properly display it on my website?

Any help would be appreciated.

$url = ' https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139';

                   $request = wp_remote_get( $url );

                   if(is_wp_error($request)) {
                       return false;
                   } else {
                       $body = $request['body'];
                   }
                   echo $body;

$api_response = json_decode( wp_remote_retrieve_body( $response ), true );

The response

 { "coord":{ "lon":159, "lat":35 }, "weather":[ { "id":500, "main":"Rain", "description":"light rain", "icon":"https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F10n.png?1499366021399" } ], "base":"stations", "main":{ "temp":22.59, "pressure":1027.45, "humidity":100, "temp_min":22.59, "temp_max":22.59, "sea_level":1027.47, "grnd_level":1027.45 }, "wind":{ "speed":8.12, "deg":246.503 }, "rain":{ "3h":0.45 }, "clouds":{ "all":92 }, "dt":1499521932, "sys":{ "message":0.0034, "sunrise":1499451436, "sunset":1499503246 }, "id":0, "name":"", "cod":200 }

Solution

You can use your $api response to display data. check below code. I did not display all data but can be displayed it by the print echo "<pre>"; print_r($api_response); echo "</pre>";

<?php

$url = 'https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139';

$response = wp_remote_get( $url );

if( is_wp_error( $response ) ) {
    return false;
} else {
    $api_response = json_decode( wp_remote_retrieve_body( $response ), true );
}

?>

<div>

    <h1>Weather reports</h1>

    <div>
        <label>Lattitude - </label> <?php echo $api_response['coord']['lat']; ?>,
        <label>Longitude - </label> <?php echo $api_response['coord']['lon']; ?>
    </div>

    <div>
        <h3>Weather</h3>
        <label><?php echo $api_response['weather'][0]['main']; ?><img src="<?php echo $api_response['weather'][0]['icon']; ?>"> - <?php echo $api_response['weather'][0]['description']; ?></label>
    </div>

    <ul>
        <li>Temp - <?php echo $api_response['main']['temp']; ?></li>
        <li>Feels like - <?php echo $api_response['main']['feels_like']; ?></li>
        <li>Temp min - <?php echo $api_response['main']['temp_min']; ?></li>
        <li>Temp max - <?php echo $api_response['main']['temp_max']; ?></li>
        <li>Pressure - <?php echo $api_response['main']['pressure']; ?></li>
        <li>Humidity - <?php echo $api_response['main']['humidity']; ?></li>
    </ul>

    <div>
        <h3>Wind</h3>
        <ul>
            <li>Speed - <?php echo $api_response['wind']['speed']; ?></li>
            <li>Deg - <?php echo $api_response['wind']['deg']; ?></li>
            <li>Gust - <?php echo $api_response['wind']['gust']; ?></li>
        </ul>
    </div>

</div>

The above code displayed something like this. you can modify based on your requirements.