Not able to fetch Weather Data from the Json Data using Angular

Question

Is the parsing way wrong? I'm trying to get weather data

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");
    });
}

Output:

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

michael · Answer 1 · 2014-01-16T09:37:12.907

0

i htink you need to access the weather this way:

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

you may use an onlne json viewer to view the structure of your data: for example: http://jsonviewer.stack.hu/ or take at look at the browser console. firebug, for example, can show the json data as tree.

And you don't need JSON.stringify. Angular does this for you:

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

edited Jan 16 '14 at 09:37

answered Jan 16 '14 at 09:27

michael

16,221
7
55
60

No tworking.. I'm checking the json data in json.parser.online.fr.....Here is my fiddle http://jsfiddle.net/U3pVM/2663/... Kindly check it – Syed Jan 16 '14 at 09:33
and what about data.data.weather? you don't need JSON.stringify angular does this for you? – michael Jan 16 '14 at 09:35
@Michael..I need to stringyfy.. because the output format of the URL is not in JSON format.. Plz check once – Syed Jan 16 '14 at 09:42
i have changed your fiddle (http://jsfiddle.net/H9V2j/) you got the console ouput exactly as you want... – michael Jan 16 '14 at 09:43

Yalamber · Answer 2 · 2014-01-16T09:36:35.203

0

Here your datais variable is assigned the data. if you inspect properly the json data returned as you can see in your console.log(datais); you will be able to access weather property in datais.data.weather. try this

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

You will be able to access weather property. Further weather property is an array which has weather values from today up to 4 upcoming days. you can access them in a loop

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

Or for example access todays weather data:

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

edited Jan 16 '14 at 09:36

answered Jan 16 '14 at 09:28

Yalamber

7,360
15
63
89

Check this http://jsfiddle.net/yalamber/U3pVM/2665/ update no need to do json.stringify – Yalamber Jan 16 '14 at 09:50
JSON.stringify actually converts your json object to string check this http://stackoverflow.com/questions/17785592/difference-between-json-stringify-and-json-parse – Yalamber Jan 16 '14 at 09:54

Not able to fetch Weather Data from the Json Data using Angular

Output:

2 Answers2