将 JSON 数据呈现为 HTML 标签 [关闭]

问题描述 投票:0回答:1

我想把我从气象站创建的 API 下载的数据放在我的气象站网站上。它是一个具有以下数据结构的 JSON 文件:

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

我都是通过代码下载的

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

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

我想知道如何将它们分开(可能在 html 标签中?)并在我的天气页面上显示它们。方式是任意的,我脑子里一片空白,我一个人无法应付

我网站的部分模板如下所示:

<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>    
php file-get-contents
1个回答
0
投票

如果你给了他们API 的链接,人们会更容易。它有 JSON 响应。

回答有点复杂,因此你的问题。我只会做适合你模板的数据:

<?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>    

你现在可以自己继续吗?

请注意,此代码未经测试,因此我不能保证它会正常工作。

© www.soinside.com 2019 - 2024. All rights reserved.