javascript - Sending received Rest data in service file to controller angularjs -
i new angular js , have problem sending received data service file controller, binds html. can please me resolve problem. thank you.
service file
"use strict"; angular.module("fleetlistmodule").service("fleetsservice", function ($http) { this.gettrucks = function () { console.log("before calling webservice"); $http.get('http://localhost:8080/login/rest/truckservices/gettrucks?truckid') .success(function (data){ var trucks = data; console.log("after calling webservice data is", trucks); return trucks; }); }; });
controller
"use strict"; angular.module("fleetlistmodule").controller("fleetlistcontroller", ['$scope', 'fleetsservice', function ($scope, fleetsservice) { var truckdata = fleetsservice.gettrucks(); console.log("inside fleet service", truckdata); $scope.trucks = truckdata; console.log("outside fleet service", truckdata); }]);
html
<div class="panel1 panel-primary"> <div class="panel-heading" align="center">trucks</div> <table class="table table-condensed table-striped " > <thead class="truck-list-header"> <tr class="truck-list-header"> <th>truck id</th> <th>status</th> <th>dest.</th> <th>alerts</th> </tr> </thead> <tbody> <tr ng-repeat="truck in trucks" ng-click="summarydata(truck)" class="truck-list-body"> <td> <div><i class="fa fa-truck truck-icon"></i>{{truck.truckid}}</div> </td> <td> <span class="label {{truck.label}}">{{truck.status}}</span> </td> <td>{{truck.destination}}</td> <td> <div><i class="fa fa-exclamation-triangle alert-icon"></i>{{truck.alerts}}</div> </td> </tr> </tbody> </table> </div>
json data receiving localhost 8080
{"truckid":"111","status":"running","destination":"winnipeg","alerts":"nothing"}
your service function doesn't return anything. return
inside success
nothing
simplified version of service using then
since success
deprecated:
this.gettrucks = function() { console.log("before calling webservice"); // return promise created `$http` return $http.get('http://localhost:8080/login/rest/truckservices/gettrucks?truckid') .then(function(responsepromise) { var trucks = responsepromise.data; console.log("after calling webservice data is", trucks); return trucks; }); };
in controller
fleetsservice.gettrucks().then(function(truckdata) { // assign data inside promise callback console.log("inside fleet service", truckdata); $scope.trucks = truckdata; }); // can't 1 , run before data has been returned server console.log("outside fleet service", $scope.trucks);//will undefined
Comments
Post a Comment