javascript - 在 jQuery 中选择和显示 api 数据

Question

我正在尝试显示来自 openweathermap API 的天气预报数据 - 当我运行此代码并单击我的提交按钮时，它在我的页面上显示“未定义”。

var api_key = "&APPID=c0aa3c8995df1b0dd97032d0072333b3";
var api = "http://api.openweathermap.org/data/2.5/forecast?q=";
var city = "Toronto";
var units = "&units=metric"

$( "#submit" ).click(function() {
    input = $('#city');
    $(function(){
        var url = api + input.val() + api_key + units;
        $.getJSON(url, function(wd){
            document.write(JSON.stringify(wd.list.main));
        })
    })
});

Answer 1

List是一个数组，你应该这样访问它

wd.list[0].main.temp

此外，无需使用 stringify，这对我来说效果很好

document.write(wd.list[0].main.temp);

这是一个循环，参见this fiddle

var api_key = "&APPID=c0aa3c8995df1b0dd97032d0072333b3";
var api = "https://api.openweathermap.org/data/2.5/forecast?q=";
var units = "&units=metric"

$( "#submit" ).click(function() {
    input = $("#city");
    $(function(){
        var url = api + input.val() + api_key + units;
        $.getJSON(url, function(wd){
            var list = wd.list;
            $.each(list, function(i,v) {
                 document.write("Timestamp: " + v.dt + " " + "Temp: " + v.main.temp + " " + "Min: " + v.main.temp_min + " " + "Max: " + v.main.temp_max + " " + "Pressure: " + v.main.pressure + "<br />");
            });
        })
    })
});