Return promise from Angularjs webapi

Question

Using Angularjs here:

I have a form where user fills up some data and clicks save button to save data :

  $scope.save = function (isValid) {
        if (isValid) {
            if (!$scope.checkBoxChecked) {
                $scope.getExistingName($scope.uName);
            }              
            var name = $scope.uName != '' ? $scope.uName? : 'testuser';                
           //Call save api                    
        }
        else {
            return false;
        }
    };

In the save method I am checking for uname, which gets it value by calling another api as below:

    $scope.getExistingName = function (uName) {
         myService.getDataFromApi(uName).then(function (data) {
         var existingSetName = '';
         if(data.length >0)
          {
             $scope.uName = data[i].uName;
          }               
        });
    }

The issue is $scope.uName in my Save button is always ''. I tried to debug and found out that the result from the $scope.getExistingName method being is promise is deffered and returned after the orignal call. Because of which my $scope.uName is empty.

What am I missing here?

--Updated---

Save method:

var name = $scope.getExistingName($scope.uName);

Updated getExistingName

   $scope.getExistingName = function (uName) {
     return myService.getDataFromApi(uName).then(function (data) {
     var existingSetName = '';
     if(data.length >0)
      {
         return data[i].uName;
      }               
    });
}

--This works--

   if (!$scope.checkBoxChecked) {
           $scope.getExistingName($scope.uName).then(function(data)
           {
             var name = $scope.uName != '' ? $scope.uName? : 'testuser';
             //Call save api 
           });
        }    
   else
   {
       var name = $scope.uName != '' ? $scope.uName? : 'testuser';
       //Call save api 
   }

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). Your `var name = ...` line is executing before your promise has resolved. — Lex, Sep 17 '18 at 16:12
@Lex yes thats the issue. But I already am using .then in my function call. I thought I would only return after my variable is populated. Could you let me know what modification do I have to make. Thanks. — kaka1234, Sep 17 '18 at 16:31
Your code will not stop and wait at the `$scope.getExistingName($scope.uName);` line, it will continue on and attempt to assign the value of `$scope.uName` to `var name=`, but the promise has not yet resolved. — Lex, Sep 17 '18 at 16:32
@Lex I understand what you meant by its not resolved as yet. How can I resolve it? Since its conditional and inside if statement I cannot move everything inside .then of my function getExistingName — kaka1234, Sep 17 '18 at 16:42
The problem is that you are wrapping your `myService.getDataFromApi` inside yet another asynchronous call. Why not simply call your `myService.getDataFromApi()` method directly instead of creating this intermediary of `$scope.getExistingName()`? Then you would handle the `.then()` directly inside your `$scope.save()` method and eliminate your asynchronous issues. Or change your `$scope.getExistingName` to return the promise returned from `myService.getDataFromApi()`. I dislike nesting so many promise returns like that, but that's just personal preference. — Lex, Sep 17 '18 at 16:42
If I understand correctly I have updated my code in my post. Did you meant by this? Its still not working. — kaka1234, Sep 17 '18 at 17:01
In the save method you need `$scope.getExistingName($scope.uName).then(function(data) { $scope.uName = data; });`. You are returning the return of a promise which is still a promise and still requires `.then()` to wait for the resolution. — Lex, Sep 17 '18 at 17:30

Return promise from Angularjs webapi

0 Answers0