My task involves the following steps:
- Initiating a query to an API for a large dataset of names, possibly through a service/factory, using
$q
(async) Implementing another service (also async) that will filter elements from the above factory based on a specific string (search field). The goal is to reduce the number of values so they can be efficiently managed by my select box.
- My controller needs to invoke the second service, retrieve these filtered values, and assign them to a
$scope
property for usage in the select box directive.
- My controller needs to invoke the second service, retrieve these filtered values, and assign them to a
I believe that I should inject only the second service/factory (narrowed values) into my controller. The first factory (large dataset) should be injected as a dependency into the second service where the comparison takes place and the filtered result set is generated.
However, I am uncertain about how to store the data from the large dataset factory once it's injected. When I try to console.log
it, it appears as a promise:
Object {then: function, catch: function, finally: function}
rather than returning the actual dataset.
The initial factory mentioned:
.factory('MedicationDisplayNamesFactory', function MedicationDisplayNamesFactory($http, $q){
return {
getDisplayNames: function(){
return $http({
method: 'GET',
url: 'http://rxnav.nlm.nih.gov/REST/spellingsuggestions?name=ambien',
headers: {
'Content-type': 'application/json'
}
});
}
};
return MedicationDisplayNamesFactory;
})
The secondary factory:
.factory('MedicationMatchingNamesFactory',
['$http', '$q', '$timeout', 'MedicationDisplayNamesFactory',
function MedicationMatchingNamesFactory($http, $q, $timeout, MedicationDisplayNamesFactory){
return {
getMatchingNames: function(){
var foo = MedicationDisplayNamesFactory.getDisplayNames().then(
function(response){
var bar = response.data.suggestionGroup.suggestionList.suggestion;
}
);
console.log(foo);
return foo;
}
};
return MedicationMatchingNamesFactory;
}])
In the controller, I need to call:
$scope.myData = MedicationMatchingNamesFactory.getMatchingNames();
Just like this example.