current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I am new to angular js and I have a problem sending the received data from my service file to controller, which ultimately binds to my html. Can someone please help me resolve this 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 my 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 from localhost 8080

{"truckId":"111","status":"Running","destination":"Winnipeg","alerts":"Nothing"}
share|improve this question
up vote 1 down vote accepted

Your service function doesn't return anything. Also return inside success does nothing

Simplified version of service using then since success is deprecated:

this.getTrucks = function() {
  console.log("before calling webservice");
  // return the promise created by `$http`
  return $http.get('http://localhost:8080/login/rest/truckservices/getTrucks?truckId')
    .then(function(responsePromise) {
      var trucks = responsePromise.data;
      console.log("after calling webservice my 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 do this one , it will run before data has been returned from server    
 console.log("outside fleet service", $scope.trucks);//will be undefined
share|improve this answer
    
Hi, its giving this error in console "TypeError: Cannot read property 'then' of undefined", if I add above function in controller. Any idea why? – Gaurav Ram Feb 7 at 21:33
    
sure you put the return in front of $http in service? – charlietfl Feb 7 at 21:36
    
Fixed it. Thank you. – Gaurav Ram Feb 7 at 21:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.