Hey everyone, I'm new to angular js and running into an issue with sending data from my service file to the controller, which is then supposed to be displayed in my HTML. Could someone please provide some guidance on how to solve this problem? Thank you!
Here's my 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;
});
};
});
And here's my 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);
}]);
This is how it looks in my 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>
Below is a snippet of the JSON data received from localhost 8080:
{"truckId":"111","status":"Running","destination":"Winnipeg","alerts":"Nothing"}