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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -