AngularJS: Service call API and return JSON

0
votes

I need to pass a value from an input field on the view using a service. The service should call my WebAPI2 and then receives an valid JSON as a response.

However, I am either getting an promise object, which I cannot resolve (even with ".then()"), or if I'm using an factory it won't compile as it seems to not implement the $get method.

The JSON Object I'm returning is also valid.

View :

<div class="input" ng-controller="InputController as ctrl">
<input ng-model="inputdata" /> {{inputdata}}
    <button ng-click="ctrl.gibDaten(inputdata)">Senden</button>
    {{cooledaten}}
</div>

Controller :

module GoogleMapsApp {
myApp.myAppModule.controller("InputController",
    ["$scope", "mapsServiceCustom",
        function ($scope, mapsServiceCustom) {
            $scope.lEingabedaten = $scope.inputdata;
            this.gibDaten = function () {
                $scope.cooledaten = mapsServiceCustom.gibDaten().then();
                console.log($scope.cooledaten);
            }
}]);

}

Service:

module GoogleMapsApp {
myApp.myAppModule.service("mapsServiceCustom",
    ["$http",
        function ($http) {
            this.gibDaten = function (lEingabe) {
                console.log(lEingabe);
                console.log($http.get("api/getDistanceData/" + lEingabe + "/Cologne")
                    .then(function(data) {
                        return data;

Controller:})); return $http.get("api/getDistanceData/" + lEingabe + "/Cologne") .then(function (data) { return data; }); //return $http.get("api/getDistanceData/" + lEingabedaten1 + "/Cologne"); } } ]);

}

Console log:

Object { $$state: Object }maps.serviceCustom.js:14:17

Object { $$state: Object }InputController.js:8:17

If I check the $$state:Object it contains exactly the desired data.

Using a factory leads me to the following error:

https://docs.angularjs.org/error/$injector/undef?p0=mapsServiceCustom

So what am I doing wrong? How would I implement my intend?

2
javascripthtmlangularjsjsontypescript

2 Answers

0
votes

You need to pass a function to then part... So just put then function in your controller and set returning response to your variable...

myApp.myAppModule.controller("InputController",
    ["$scope", "mapsServiceCustom",
        function ($scope, mapsServiceCustom) {
            $scope.lEingabedaten = $scope.inputdata;
            this.gibDaten = function () {
                mapsServiceCustom.gibDaten().then(function(response){
                    // set response to your variable
                    $scope.cooledaten = response;
                });
            }

}]);
0
votes

You have not implemented the service properly. please go through the following link (Angularjs official documentation) https://docs.angularjs.org/guide/services

You need to expose your API by returning it an js object.(Same thing is shown in your error link. please refer to that as well)

module GoogleMapsApp {
myApp.myAppModule.service("mapsServiceCustom",
    ["$http", function ($http) {
            this.gibDaten = function (lEingabe) {
                console.log(lEingabe);
                console.log($http.get("api/getDistanceData/" + lEingabe + "/Cologne")
                    .then(function(data) {
                        return data;
                    }
            }

            return { gibDaten: this.gibDaten};
    }]);
}

Here You can learn more on $get method https://docs.angularjs.org/guide/providers