Question

I've just started getting into using Angular and having an issue displaying a single record that is being returned from using $http (get). I'm getting the data back correctly. This is the html I've got....

<div ng-controller="UserDataController as udCtrl">
    Name: {{udCtrl.user.name}}
</div> 

<div id="debug" style="margin-top:24px;border:solid 1px #900;background:#efefef;min-height:100px"></div>

have also tried and a couple of other variations...

Name: {{udCtrl.name}}

Javascript:

(function() {

var app = angular.module('rtcTimesheet', []);
var servicePath="/angular/";
$("#debug").append("Starting...<br/>");

app.controller("UserDataController",["$http",function($http){

    var user=this;
    user=[];

    $http({
        method:     'GET',
        url:        servicePath+'login.php',
        params: {
            un:     "username",
            pwd:    "123456789"
        }
    }).then(function(response){

        if(response.data.hasOwnProperty("HasError")) {
            $("#debug").append("ERROR: " + response.data.ErrorMessage);
        } else {
            $("#debug").append("Data: " + JSON.stringify(response.data));
            user=response.data;
        }

    },function (err){
        alert("ERROR: "+err.status); //data, status, headers, config, statusText
    });

}]);

app.controller("UserTest",function(){
    this.user=users;
});

var users = {
                id: '1',
                name: 'Joe Bloggs'
                };

})();

This is what is returned in JSON format and I can see this in the little debug area I created.

 {"data":{"id":"1","name":"Joe Bloggs"}

if I change the html to use the code below it works.

<div ng-controller="UserTest as udCtrl">
    Name: {{udCtrl.user.name}}
</div>

I just cannot see where I'm going wrong and why it will not display the returned name.

Answer 1

Define the user variable on $scope and access it with $scope.user. You are having referance problem.

Example

//Define user variable like this.
$scope.user = {};

//On response -->
}).then(function(response){

    if(response.data.hasOwnProperty("HasError")) {
        $("#debug").append("ERROR: " + response.data.ErrorMessage);
    } else {
        $("#debug").append("Data: " + JSON.stringify(response.data));
        $scope.user=response.data;
    }

}

EDIT

If you want to use udCtrl referance define variable under thisvariable on controller.

//Define user variable like this.
var ctrl = this;
ctrl.user = {};

//On response -->
}).then(function(response){

    if(response.data.hasOwnProperty("HasError")) {
        $("#debug").append("ERROR: " + response.data.ErrorMessage);
    } else {
        $("#debug").append("Data: " + JSON.stringify(response.data));
        ctrl.user=response.data;
    }

}

EDIT 2 FOR ABSOLUTE ANSWER

(function() {

var app = angular.module('rtcTimesheet', []);
var servicePath="/angular/";
$("#debug").append("Starting...<br/>");

app.controller("UserDataController",["$http",function($http){

    var udCtrl=this;
    udCtrl.user=[];

    $http({
        method:     'GET',
        url:        servicePath+'login.php',
        params: {
            un:     "username",
            pwd:    "123456789"
        }
    }).then(function(response){

        if(response.data.hasOwnProperty("HasError")) {
            $("#debug").append("ERROR: " + response.data.ErrorMessage);
        } else {
            $("#debug").append("Data: " + JSON.stringify(response.data));
            udCtrl.user=response.data;
        }

    },function (err){
        alert("ERROR: "+err.status); //data, status, headers, config, statusText
    });

}]);

app.controller("UserTest",function(){
    this.user=users;
});

var users = {
                id: '1',
                name: 'Joe Bloggs'
                };

})();

Angular display a single record from json

1 个答案: