Angular Service is not returning any value if i am passing api

Question

I have written the service in angular.In browser console data is coming but in return I am not getting [object Object];

/// <reference path="angular.min.js" />
var app = angular.module("myapp", []);
app.service("myservice", function ($http) {
    this.myfun = function () {
        var x;
        $http.get("http://localhost:41173/api/AngularTest/login_valid").success(function (response) {
            console.log("all get data",response);
            x = response.data
        }).error(function (err) {
            console.log("all error ", err);
        });
        debugger;
        return x;
    }
});
app.controller("myctrl", function ($scope, $http, myservice) {
    $scope.transform = function (input) {
        $http.get("http://localhost:41173/api/AngularTest/login_valid").then(function (response) {

            if (response.data == true) {
                $scope.out = myservice.myfun();
            }
            else {
                $scope.out = "Fail";
            }
        });

    }
});

score 0 · Accepted Answer · answered Sep 05 '18 at 11:02

You need to work with Promises. They are asynchronous callbacks, and you can't return a value from them, only a Promise, which can be resolved. Also use .then() instead of .success(). Here is what it may look like:

var app = angular.module("myapp", []);
app.service("myservice", function($http) {
  this.myfun = function() {
    return $http.get("http://localhost:41173/api/AngularTest/login_valid");
  }
});
app.controller("myctrl", function($scope, $http, myservice) {
  $scope.transform = function(input) {
    $http.get("http://localhost:41173/api/AngularTest/login_valid").then(function(response) {
      if (response.data == true) {
        myservice.myfun().
        then(function(res) {
          $scope.out = res.data;
        }, function(err) {
          console.log("Error:", err)
        })
      } else {
        $scope.out = "Fail";
      }
    });
  }
});

Yes.It worked.Thanks a lot.Can you tell the reason behind this? — Swadesh, Sep 05 '18 at 11:28
@Swadesh asynchronous callbacks may get the data in few milliseconds or in few minutes, so you don't know when it will arrive, therefore you can't assign it to a value. You have to resolve it every time. You can do that with `.then()` — Aleksey Solovey, Sep 05 '18 at 11:30

score -1 · Answer 2 · answered Sep 05 '18 at 11:26

This is not how async services work. You have to return the promise and manage data in the controller.

  this.myfun = function() {
    return $http.get(API).
    then(function(response) {
      return response.data;
    }, function(error) {
      return error;
    });
  };

Then in the controller

app.controller("myctrl", function ($scope, $http, myservice) {
    $scope.transform = function (input) {
        $http.get("OTHER API").then(function (response) {

            if (response.data == true) {
              myservice.myfun().then(function (data) {
                $scope.out = data;
              },
              function(error) {
                $scope.out = error;
              });
            }
            else {
                $scope.out = "Fail";
            }
        });

    }
});

Make sure response.data really returns a boolean.

Looking at your controller, it looks like you want to chain http calls.

It would look better to put every http requests inside a service and use async await to chain them.

Provided you have the correct polyfills:

async transform = function(input) {
  var firstData = await myservice.firstCall();
  firstData && await myservice.myfun();
}

Try also to cleanup the overuse of $scope with controllerAs

The ES6 promises used by `async`/`await` are not integrated with the AngularJS framework. — georgeawg, Sep 05 '18 at 12:29
It's javascript. It doesn't need to be integrated anywhere. You'll have to use $scope.apply() to update the scope but it works. https://medium.com/@alSkachkov/using-async-await-function-in-angular-1-5-babel-6-387f7c43948c — gyc, Sep 05 '18 at 12:46

Angular Service is not returning any value if i am passing api

2 Answers2