How to show data on the view using C# and Angular js

Question

I have the following controller:

  public class UserController : BaseApiController
    {
        // GET api/<controller>
        public string Get()
        {
            var currentuser = CurrentUser.Name;
            return currentuser;
        }

    }

The value of currentuser I pass it the datacontext in this way:

 function getName() {
                var deferred = $q.defer();
                var promise = deferred.promise;
                cachedPromises.currentuser = promise;
                $http.get(baseUrl + 'api/user').success(getSucceeded).error(getFailed);
                return cachedPromises.currentuser;

                function getSucceeded(data) {
                    console.log('data:', data);
                }

                function getFailed(parameters) {
                        console.log("failed", parameters);
                    }
            }

On the console log console.log('data:', data); I get the value and in order to apply binding I have to pass this value to the scope in the controller.js. In order to do that, I have done a controller in this way.

LogName.$inject = ['$scope', 'datacontext']
    function LogName($scope, datacontext) {

        $scope.name =[];

        datacontext.getName().then(function (currentuser) {
            $scope.name = currentuser;

        });
    }

And on the view I have the following code for data binding :

 <h1 ng-controller="LogName" class="title">{{name}}</h1>

The binding is shown as an empty array, and I don't understand what goes wrong .

EDIT: When I do a console log on the controller:

  datacontext.getName().then(function (currentuser) {
            $scope.name = currentuser;
            console.log('current', currentuser);

        });

Nothing appears on the view, the compiler does not reach the datacontext.getName

cachedPromises.currentuser = promise; This sets the promise as currentuser, which later you're trying to bind to. Where are you retrieving the actual value of currentuser from? — Yuval Itzchakov
– Yuval Itzchakov, Commented Mar 10, 2015 at 13:30
function getSucceeded(data) { console.log('data:', data); } Here I get the value and then I retrieve it in the controller — Besa
– Besa, Commented Mar 10, 2015 at 13:35
even if I change the datacontext.getName().then(function (currentuser) { $scope.name = currentuser; to datacontext.getName().then(function (data) { $scope.name = data; I get the same thing — Besa
– Besa, Commented Mar 10, 2015 at 13:35

sylwester · Accepted Answer · 2015-03-10 13:48:12Z

1

You MVC controller returning string public string Get() and you declare $scope.name =[]; as array change it to $scope.name =''; that should helps

and change your function getName to :

function getName() {
    var deferred = $q.defer();


    $http.get(baseUrl + 'api/user').success(getSucceeded).error(getFailed);
     return deffered.promise;

    function getSucceeded(data) {
        console.log('data:', data);
        //add this
        deferred.resolve(data);
    }

    function getFailed(parameters) {
        console.log("failed", parameters);
        deferred.reject(parameters);;
    }
     return deffered.promise;
}

edited Mar 10, 2015 at 13:48

answered Mar 10, 2015 at 13:33

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Besa Over a year ago

Nothing appears in the view. I am guessing is an empty string

Besa Over a year ago

When I do a console.log($scope.name); under the controller : datacontext.getName().then(function (data) { $scope.name = data; console.log($scope.name); Nothing appears on the screen

Steve Mitcham · Accepted Answer · 2015-03-10 13:48:14Z

1

You are never resolving your promise to provide the name. Add a resolve to the getSucceeded function and a reject to the error function.

function getSucceeded(data) {
   console.log('data:', data);
   promise.resolve(data);
}

function getFailed(parameters) {
   console.log("failed", parameters);
   promise.reject(parameters);
}

This will provide the data to the functions that are waiting on the promise results.

answered Mar 10, 2015 at 13:48

Steve Mitcham

5,3131 gold badge31 silver badges56 bronze badges

Comments

Mustafa · Accepted Answer · 2015-03-10 13:57:28Z

1

There are two issues:

Firstly, you are not resolving the promise. You need to resolve your promise with your data that is returned from the server.

Second, the result is actually in the results property of the data that is returned from the server. Here as you are retrieving only name, you should use below code:

function getSucceeded(data) {
   console.log('data:', data);
   deferred.resolve(data.results[0]);
}

answered Mar 10, 2015 at 13:57

Mustafa

2044 silver badges16 bronze badges

4 Comments

Besa Over a year ago

Its correct approach just that data.result[0], 0 is undefined. So only data would be correct. Thank you

Mustafa Over a year ago

I don't understand what do you mean by "0 is undefined". Can you please elaborate.

Besa Over a year ago

Since I return only one string, I added $scope.name =' '; And data. result[0] is not an array, but data = result -> a string

Mustafa Over a year ago

Not appropriate. Try debugging the script and you will get to know what I am trying to explain.

Collectives™ on Stack Overflow

How to show data on the view using C# and Angular js

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related