Display specific value from json response using Angular

Question

Fairly new to Angular, been used to ASP/MVC/C#/Jquery for years so a bit of a learning curve. However, I'm having an issue with something I think should be simple, and based on my knowledge from other frameworks isn't working as expected.

So I have a get request to an API controller which returns data like this:

{"user":{"FirstName":"John","LastName":"Smith","EmailAddress":"[email protected]"}}

Module:

(function() {
"use strict";
//Getting the existing module
angular.module("appName")
    .controller("userDataController", function($scope, $http) {
        $http.get("/api/user")
            .then(function (response) {
                //Example response 
                //{"user":{"FirstName":"John","LastName":"Smith","EmailAddress":"[email protected]"}}
                $scope.userData = response.data;
            });
    });
})();

If I output in my view {{userData}} I get the string of data displayed, as i understand scope is given to the variable named.

However, I cant seem to display the individual data, eg: FirstName.

I have tried an ng-repeat on the userData object but that doesn't do anything., Ive also tried various things to display FirstName or EmailAddress but no luck. Am I doing something fundamentally wrong?

Answer 1

Assuming it is actually a JSON object: {{userData.user.FirstName}}

Otherwise:

$scope.userData = angular.fromJson(response.data)

And then you can still use the code above.

Answer 2

May be the response is content type text and not json as expected? Have a look at the response headers.