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

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

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

$(function () {

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

});

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

{
    "coord": {
        "lon": -122.3321,
        "lat": 47.6062
    },
    "weather": [
        {
            "id": 721,
            "main": "Haze",
            "description": "haze",
            "icon": "50d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 61.36,
        "feels_like": 61.2,
        "temp_min": 55.49,
        "temp_max": 66.31,
        "pressure": 1022,
        "humidity": 85
    },
    "visibility": 10000,
    "wind": {
        "speed": 1.01,
        "deg": 319,
        "gust": 5.01
    },
    "clouds": {
        "all": 1
    },
    "dt": 1627137674,
    "sys": {
        "type": 2,
        "id": 2004026,
        "country": "US",
        "sunrise": 1627130239,
        "sunset": 1627185243
    },
    "timezone": -25200,
    "id": 5809844,
    "name": "Seattle",
    "cod": 200
}

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

{"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}```
q7solyqu

q7solyqu1#

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

var $data = ('#data');
//dummy json 
var data = {
  "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
}
/* $.ajax({
   //your codes....
   */
console.log(data.main.temp) //use it like this...
$.each(data.weather, function(i, item) {
  console.log(item.description) //get description like this..
})
/*
}
});*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

相关问题