While I have posed this question in various forms, I now find myself stuck with a piece of code that contains an elusive bug.
My Angular service looks like this:
.service("lookupDataService", [
'$q', '$http', '$timeout', function($q, $http, $timeout) {
this.brokers = function() {
var cachedBrokers = localStorage.getItem("brokers");
if (!cachedBrokers) {
return $http.get('/api/brokers')
.success(function (data) {
localStorage.setItem("brokers", data);
});
} else {
return $timeout(function () {
return {
"data": localStorage.getItem("brokers")
}
}, 1000);
}
}
}])
I am using this service in my controller
$scope.loadData = function() {
$scope.promise = $q.all([
lookupDataService.brokers()
.then(function(data) { $scope.enquiriesBrokers = data; }),
]);
};
There are several issues with the code above, but my main focus is on returning a promise to my controller from the service. Specifically, it seems that $q does nothing with its promise, though it is used later in the code.
While inspecting the data in the service returns the desired results, when it reaches the controller, the data shows as [Object object] instead of an array as expected.
How can I return a promise when none exists?
Below is a snippet of the JSON response received from the service:
And here is an excerpt of the HTML:
<div class="col-sm-4">
<label for="enquiries-broker">Broker:</label>
<select ng-model="equiriesSelectedBroker" class="form-control" ng-options="broker.brokerCodeField for broker in enquiriesBrokers" id="enquiries-broker">
<option value="">Please select a broker</option>
</select>
</div>