Parsing json data in angular?

Question

I am trying angular for the first time and I am pretty stuck.This is the JSON data that I am receiving from an API-

{
    "coord": {
        "lon": 72.85,
        "lat": 19.01
    },
    "weather": [
        {
            "id": 803,
            "main": "Clouds",
            "description": "broken clouds",
            "icon": "04d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 301.828,
        "pressure": 1021.02,
        "humidity": 100,
        "temp_min": 301.828,
        "temp_max": 301.828,
        "sea_level": 1022.28,
        "grnd_level": 1021.02
    },
    "wind": {
        "speed": 3.52,
        "deg": 246.002
    },
    "clouds": {
        "all": 80
    },
    "dt": 1442131167,
    "id": 1275339,
    "name": "Mumbai",
    "cod": 200
}

This is my function in controller-

(
function () {
    var app=angular.module("weather",[]);
    var query="";
    app.controller("search",function(){
        query="mumbai";

    });

    app.controller("result",['$http','$scope',function($http,$scope){

        var city=query;
        $http({
            url:'http://api.openweathermap.org/data/2.5/weather',
            method:'GET',
            params:{q:city}
        }).then(function (response) {

            console.log(response);
            console.log(response.name);

        },function (response){
            //error message
        });


    }]);
}
)();

Following are the console messages-

So I am not able to understand that if console.log(response) is showing Object then why console.log(response.name) is showing undefined instead of "Mumbai".

Suggest a possible solution.

EDIT - Solution found : Console.log(response.data.name); seen the docs

Answer 1

If you read the doc you would realize that

The response object has these properties:

data – {string|Object} – The response body transformed with the transform functions.

status – {number} – HTTP status code of the response.

headers – {function([headerName])} – Header getter function.

config – {Object} – The configuration object that was used to generate the request.

statusText – {string} – HTTP status text of the response.

The answer to your question in the comment is also in the doc

Default Transformations

The $httpProvider provider and $http service expose defaults.transformRequest and defaults.transformResponse properties. If a request does not provide its own transformations then these will be applied.

You can augment or replace the default transformations by modifying these properties by adding to or replacing the array.

Angular provides the following default transformations:

Request transformations ($httpProvider.defaults.transformRequest and $http.defaults.transformRequest):

If the data property of the request configuration object contains an object, serialize it into JSON format.

Response transformations ($httpProvider.defaults.transformResponse and $http.defaults.transformResponse):

If XSRF prefix is detected, strip it (see Security Considerations section below). If JSON response is detected, deserialize it using a JSON parser.

Answer 2

Use JSON.parse() for de-serializing JSON object you got from API

 $http({
        url:'http://api.openweathermap.org/data/2.5/weather',
        method:'GET',
        params:{q:city}
    }).then(function (response) {
        var response=JSON.parse(response);
        console.log(response);
        console.log(response.name);

    },function (response){
        //error message
    });


}]);