Search code examples
phpfile-get-contents

Rendering JSON data to HTML tags


I would like to put data on my weather station website that I download from the API created by this station. It is a JSON file that has the following data structure:

data
    outdoor
        temperature
            unit:℃
            value:-0.2

    dew_point
            unit:℃
            value:-1.5
    humidity
            unit:%
            value:91
    rainfall
        rain_rate
            unit:mm/hr
            value:0.0
        daily
            unit:mm
            value:4.2

etc. for other parameters

I download it all by code

<?php
$json = file_get_contents('LINK TO API');
$data = json_decode($json)->data;

echo '<pre>';
print_r($data);
echo '</pre>';
?>

I would like to know how I can separate these (maye in html tags?) and show them on my weather page. The way is arbitrary, I have a void in my head and I can't handle it alone

Part of the template from my website looks like this:

<table style="width: 100%;">
    <tr>
        <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:25px"><i class="wi wi-thermometer" title="Temperature"></i></span></td>
        <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:25px"><i class="wi wi-raindrop" title="Dew point"></i></span></td>
        <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:25px"><i class="wi wi-humidity" title="Humidity"></i></span></td>
        <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:25px"><i class="wi wi-strong-wind" title="Wind gust"></i></span></td>
    </tr>
    <tr>
        <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:20px"><b>    </b></span></td>
        <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:20px"><b>    </b></span></td>
        <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:20px"><b>    </b></span></td>
        <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:20px"><b>    </b></span></td>
    </tr>
</table>    

Solution

  • It would been easier for people if you had given them the link to the API. It's got the JSON response.

    The response is somewhat complex, hence your question. I'll do only the data which fits in your template:

    <?php
    
    $json    = file_get_contents('LINK TO API');
    $data    = json_decode($json)->data;
    $outdoor = $data->outdoor;
    $wind    = $data->wind;
    
    function output($measurement)
    {
        echo $measurement->value . $measurement->unit;
    }
    
    ?>
    <table style="width: 100%;">
        <tr>
            <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:25px"><i class="wi wi-thermometer" title="Temperature"></i></span></td>
            <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:25px"><i class="wi wi-raindrop" title="Dew point"></i></span></td>
            <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:25px"><i class="wi wi-humidity" title="Humidity"></i></span></td>
            <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:25px"><i class="wi wi-strong-wind" title="Wind gust"></i></span></td>
        </tr>
        <tr>
            <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:20px"><b><?php  output($outdoor->temperature); ?></b></span></td>
            <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:20px"><b><?php  output($outdoor->dew_point); ?></b></span></td>
            <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:20px"><b><?php  output($outdoor->humidity); ?></b></span></td>
            <td style="padding: 8px;text-align: center;width: 20%"><span style="font-size:20px"><b><?php  output($wind->wind_gust); ?></b></span></td>
        </tr>
    </table>    
    

    Can you continue this yourself now?

    Note that this code is untested, so I cannot guarantee it will work properly.