如何从api检索数据并将其转换为网页？

lsmepo6l  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(422)

从api访问数据时遇到问题。这是我的密码和假密码。

  1. $(function () {
  3.     var $data = ('#data');
  4.     $.ajax({
  5.         type: 'GET',
  6.         url: 'http://api.openweathermap.org/data/2.5/weather?lat=47.6062&lon=-122.3321&units=imperial&appid=a0bfe75fbff13d4040af7eb66d1d82b5',
  7.         success: function (data) {
  8.             $.each(data, function (i, item) {
  9.                 $data.append('<li>Temp: ' + item.main['temp'] + '</li>');
  10.             });
  11.         }
  12.     });
  14. });

我得到一个错误，上面写着“UncaughtTypeError:Cannotreadproperty'temp'of undefined”，这是api。

  1. {
  2.     "coord": {
  3.         "lon": -122.3321,
  4.         "lat": 47.6062
  5.     },
  6.     "weather": [
  7.         {
  8.             "id": 721,
  9.             "main": "Haze",
  10.             "description": "haze",
  11.             "icon": "50d"
  12.         }
  13.     ],
  14.     "base": "stations",
  15.     "main": {
  16.         "temp": 61.36,
  17.         "feels_like": 61.2,
  18.         "temp_min": 55.49,
  19.         "temp_max": 66.31,
  20.         "pressure": 1022,
  21.         "humidity": 85
  22.     },
  23.     "visibility": 10000,
  24.     "wind": {
  25.         "speed": 1.01,
  26.         "deg": 319,
  27.         "gust": 5.01
  28.     },
  29.     "clouds": {
  30.         "all": 1
  31.     },
  32.     "dt": 1627137674,
  33.     "sys": {
  34.         "type": 2,
  35.         "id": 2004026,
  36.         "country": "US",
  37.         "sunrise": 1627130239,
  38.         "sunset": 1627185243
  39.     },
  40.     "timezone": -25200,
  41.     "id": 5809844,
  42.     "name": "Seattle",
  43.     "cod": 200
  44. }

我希望能够访问临时文件和说明，并将它们附加或添加到我的页面。它不需要是一个列表，但我想用css来设置它的样式。请随意更改任何代码。

  1. {"coord":{"lon":-122.33,"lat":47.61},"weather":[{"id":721,"main":"Haze","description":"haze","icon":"50d"}],"base":"stations","main":{"temp":64.09,"feels_like":63.91,"temp_min":57.43,"temp_max":69.62,"pressure":1022,"humidity":79},"visibility":10000,"wind":{"speed":1.99,"deg":325,"gust":3},"clouds":{"all":1},"dt":1627141350,"sys":{"type":2,"id":2004026,"country":"US","sunrise":1627130238,"sunset":1627185243},"timezone":-25200,"id":5809844,"name":"Seattle","cod":200}```
ApijqueryajaxJavaScriptHtml

1条答案

按热度按时间
q7solyqu

q7solyqu1#

访问 temp 你不需要使用 .each 循环您可以直接访问它们，即： data.main.temp 和访问天气->说明，您可以使用 .each 循环和每个循环内部使用 item.description .
演示代码：

  1. var $data = ('#data');
  2. //dummy json 
  3. var data = {
  4.   "coord": {
  5.     "lon": -122.33,
  6.     "lat": 47.61
  7.   },
  8.   "weather": [{
  9.     "id": 721,
  10.     "main": "Haze",
  11.     "description": "haze",
  12.     "icon": "50d"
  13.   }],
  14.   "base": "stations",
  15.   "main": {
  16.     "temp": 64.09,
  17.     "feels_like": 63.91,
  18.     "temp_min": 57.43,
  19.     "temp_max": 69.62,
  20.     "pressure": 1022,
  21.     "humidity": 79
  22.   },
  23.   "visibility": 10000,
  24.   "wind": {
  25.     "speed": 1.99,
  26.     "deg": 325,
  27.     "gust": 3
  28.   },
  29.   "clouds": {
  30.     "all": 1
  31.   },
  32.   "dt": 1627141350,
  33.   "sys": {
  34.     "type": 2,
  35.     "id": 2004026,
  36.     "country": "US",
  37.     "sunrise": 1627130238,
  38.     "sunset": 1627185243
  39.   },
  40.   "timezone": -25200,
  41.   "id": 5809844,
  42.   "name": "Seattle",
  43.   "cod": 200
  44. }
  45. /* $.ajax({
  46.    //your codes....
  47.    */
  48. console.log(data.main.temp) //use it like this...
  49. $.each(data.weather, function(i, item) {
  50.   console.log(item.description) //get description like this..
  51. })
  52. /*
  53. }
  54. });*/
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com