无法使用Angular从Json数据中获取天气数据

时间:2014-01-16 09:19:08

标签: angularjs

解析方式错了吗?我正在尝试获取天气数据

function Hello($scope, $http) {
$http
    .jsonp('http://api.worldweatheronline.com/free/v1/weather.ashx?q=London&format=json&num_of_days=5&key=MYKEY&callback=JSON_CALLBACK')
    .success(function(data) {
        var datais = JSON.stringify(data);
        console.log("Datais::"+datais);
        console.log("Weather::"+datais["weather"]);


    })
    .error(function(data){
       alert("Error");
    });
}

输出:

Datais::{
"data": {
    "current_condition": [{
        "cloudcover": "25",
        "humidity": "76",
        "observation_time": "09:13 AM",
        "precipMM": "0.0",
        "pressure": "992",
        "temp_C": "9",
        "temp_F": "48",
        "visibility": "10",
        "weatherCode": "113",
        "weatherDesc": [{
            "value": "Sunny"
        }],
        "weatherIconUrl": [{
            "value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0001_sunny.png"
        }],
        "winddir16Point": "SSW",
        "winddirDegree": "200",
        "windspeedKmph": "13",
        "windspeedMiles": "8"
    }],
    "request": [{
        "query": "London, United Kingdom",
        "type": "City"
    }],
    "weather": [{
        "date": "2014-01-16",
        "precipMM": "1.6",
        "tempMaxC": "11",
        "tempMaxF": "52",
        "tempMinC": "5",
        "tempMinF": "41",
        "weatherCode": "116",
        "weatherDesc": [{
            "value": "Partly Cloudy"
        }],
        "weatherIconUrl": [{
            "value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
        }],
        "winddir16Point": "S",
        "winddirDegree": "191",
        "winddirection": "S",
        "windspeedKmph": "30",
        "windspeedMiles": "19"
    }, {
        "date": "2014-01-17",
        "precipMM": "1.3",
        "tempMaxC": "10",
        "tempMaxF": "50",
        "tempMinC": "5",
        "tempMinF": "42",
        "weatherCode": "116",
        "weatherDesc": [{
            "value": "Partly Cloudy"
        }],
        "weatherIconUrl": [{
            "value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
        }],
        "winddir16Point": "SSW",
        "winddirDegree": "202",
        "winddirection": "SSW",
        "windspeedKmph": "27",
        "windspeedMiles": "17"
    }, {
        "date": "2014-01-18",
        "precipMM": "2.7",
        "tempMaxC": "10",
        "tempMaxF": "49",
        "tempMinC": "4",
        "tempMinF": "39",
        "weatherCode": "266",
        "weatherDesc": [{
            "value": "Light drizzle"
        }],
        "weatherIconUrl": [{
            "value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0017_cloudy_with_light_rain.png"
        }],
        "winddir16Point": "S",
        "winddirDegree": "177",
        "winddirection": "S",
        "windspeedKmph": "23",
        "windspeedMiles": "15"
    }, {
        "date": "2014-01-19",
        "precipMM": "1.0",
        "tempMaxC": "8",
        "tempMaxF": "46",
        "tempMinC": "5",
        "tempMinF": "41",
        "weatherCode": "122",
        "weatherDesc": [{
            "value": "Overcast"
        }],
        "weatherIconUrl": [{
            "value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"
        }],
        "winddir16Point": "ESE",
        "winddirDegree": "110",
        "winddirection": "ESE",
        "windspeedKmph": "13",
        "windspeedMiles": "8"
    }, {
        "date": "2014-01-20",
        "precipMM": "0.4",
        "tempMaxC": "8",
        "tempMaxF": "47",
        "tempMinC": "1",
        "tempMinF": "34",
        "weatherCode": "116",
        "weatherDesc": [{
            "value": "Partly Cloudy"
        }],
        "weatherIconUrl": [{
            "value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
        }],
        "winddir16Point": "NW",
        "winddirDegree": "311",
        "winddirection": "NW",
        "windspeedKmph": "12",
        "windspeedMiles": "7"
    }]
}
}

Weather::undefined

2 个答案:

答案 0 :(得分:0)

我想你需要以这种方式访问​​天气:

 console.log("Weather::"+datais.data.weather);

您可以使用onlne json查看器查看数据结构:例如:http://jsonviewer.stack.hu/或查看浏览器控制台。例如,firebug可以将json数据显示为树。

而且你不需要JSON.stringify。 Angular为您做到了这一点:

 .success(function(data) {
        console.log(data.data.weather);
 })

答案 1 :(得分:0)

这里为您的datais变量分配数据。 如果你正确检查了json数据,你可以在console.log(datais)中看到; 您将能够访问datais.data.weather中的天气属性。 试试这个

console.log("Weather::"+datais.data.weather);

您将可以访问天气属性。 更多天气属性是一个阵列,其天气值从今天到即将到来的4天。你可以循环访问它们

for(i=0; i<datais.data.weather.length; i++){
 console.log(datais.data.weather[i]);
}

或者例如访问今天的天气数据:

console.log(datais.data.weather[0].date);
console.log(datais.data.weather[0].tempMaxC);
console.log(datais.data.weather[0].tempMinC);