Question

我想创建一个HTML页面，该页面从以下URL引入数据：

https://www.aviationweather.gov/cgi-bin/json/MetarJSON.php?density=all&bbox=-81.97833633,33.74239834,-79.92494965,36.77610887

此网址中的页面会在浏览器中生成JSON视图

我的HTML页面需要使用此数据并将其转换为下表。我已经看过许多示例，并尝试过对它们进行逆向工程，但是我一直没有成功。任何帮助将不胜感激。

我的页面应如下所示。理想情况下，显示的每个记录都会出现在“标签”内的表格中

`

<table>
<thead>
<tr>
<td>data</td>
<td>id</td>
<td>site</td>
<td>prior</td>
<td>obsTime</td>
<td>temp</td>
<td>dewp</td>
<td>wspd</td>
<td>wdir</td>
<td>ceil</td>
<td>cover</td>
<td>visib</td>
<td>fltcat</td>
<td>altim</td>
<td>slp</td>
<td>rawOb</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
... for each record
</tr>
</tbody>
</table>

`

好的，这是对我使用GOOGLE Calendar App所做的反向工程的尝试。

`

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
      //Jquery's ajax request
      $.ajax({
             type:'GET',
             url:'https://www.aviationweather.gov/cgi-bin/json/MetarJSON.php?density=all&bbox=-81.97833633,33.74239834,-79.92494965,36.77610887',
             dataType: 'json',
             async:true
             }).done(function(data){
                     //once we get a successful response this callback function
                     //gets fired, and "data" contains the parsed json file .
                     //here we iterate over the object array
                     $.each(data.properties, function(i, property){
                            //append data to the list.
                            if(property.data = "METAR"){
                            $('table.isSearch tbody').append(`<tr><td width="150">${property.id}</td><td width="200">${property.fltcat}</td><td>${property.ceil}</td></tr>`);
                            }
                            });

                     }).fail(function(e){
                             error(e);
                             });

      </script>
</head>
<body>
  <table border="1">
  <thead>
  <tr>
  <td>id</td>
  <td>fltcat</td>
  <td>ceil</td>
  </tr>
  </thead>
  <tbody>
  </tbody>
  </table>

</body>
</html>

`

从天气资源中获取数据以显示在网站上

0 个答案: