CODEWITHSUNDEEP
javascriptc#angularjs
Besa
Besa

Reputation: 515

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

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

Upvotes: 1

Views: 524

Answers (3)

Mustafa
Mustafa

Reputation: 204

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

Upvotes: 1

Steve Mitcham
Steve Mitcham

Reputation: 5313

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.

Upvotes: 1

sylwester
sylwester

Reputation: 16508

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

Upvotes: 1

Related Questions