Fetching JSON data from multiple web api methods ($q.all) - angularjs

Question

I have a simple app with a form. When the form loads I want to call a couple of web api methods to fetch the json data used to initialize the form. The form is working fine with hardcoded data in my factory class. I am unsure how I can make multiple request in that file and is kind of stuck.
The form:
<div class="modal-header" style="text-align:center">
<h3 class="modal-title">Configure</h3>
<div style="margin-top:10px">
<button tabindex="100" class="btn btn-success pull-left" type="submit">Submit</button>
<button class="btn btn-warning pull-right" ng-click="close($event)">Close</button>
</div>
</div>
<div class="modal-body">
<div class="col-sm-6" style="width: 100%;">
<form name="joinForm">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3">Symbol</label>
<div class="col-sm-9">
<select ng-model="simulationsettings.symbols" ng- options="key as value for (key,value) in symbols"></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Interval</label>
<div class="col-sm-9">
<select ng-model="simulationsettings.intervals" ng-options="key as value for (key,value) in intervals"></select>
</div>
</div>
</div>
</form>
</div>
The controller:
mainApp2.controller("moduleConfigformController",
function moduleConfigformController($scope, moduleConfigformService,$uibModalInstance) {
$scope.close = function(e) {
$uibModalInstance.dismiss();
e.stopPropagation();
};
$scope.simulationsettings = moduleConfigformService.simulationsettings;
$scope.symbols = $scope.simulationsettings.symbols;
$scope.intervals = $scope.simulationsettings.intervals;
});
The factory class that holds the (hard coded) data for the form:
mainApp2.factory("moduleConfigformService",
function () {
return {
simulationsettings: {
symbols: {
'symbol1': "symbol1",
'symbol2': "symbol2"
},
intervals: {
'60': "1 minute",
'120': "2 minutes",
'180': "3 minutes"
}
}
}
});
Instead of hard coded values I want to call the server but is pretty stuck after several hours of research and trail and error:
mainApp2.factory("moduleConfigformService",
function () {
function getSymbols() {
return $http.get("/api/getsymbols");
}
function getIntervals() {
return $http.get("/api/getIntervals");
}
return {
simulationsettings: {
symbols : getSymbols()
},
intervals : getIntervals()
}
});
Can you point me in the right direction?

Answer 1

The $http Service doesn't return values. It returns promises. See AngularJS $http Service API Reference - General Usage. Also using promise based APIs from a factory can be a bit tricky. I would suggest writing and debugging the code in the controller and later re-factor to use a factory.
app.factory("moduleConfigformService",
function ($q,$http) {
function getSymbols() {
return $http.get("/api/getsymbols")
.then(function (response) {
return response.data;
});
}
function getIntervals() {
return $http.get("/api/getIntervals")
.then(function (response) {
return response.data
});
}
return {
getSymbols: getSymbols,
getIntervals: getIntervals,
simulationsettings: function () {
var promiseHash = {};
promiseHash.symbols = getSymbols();
promiseHash.intervals = getIntervals();
return $q.all(promiseHash);
}
}
});
Usage
var settingsPromise = moduleConfigformService.simulationsettings();
settingsPromise.then(function(settings) {
$scope.simulationsettings = settings;
}).catch(function(error) {
throw error;
});

Answer 2

If i take a look at your controller, i don't see that you wait for the http request to return an answer.
You should take a look at angularjs promises
In short you have to have to use something like
moduleConfigformService.simulationsettings.then(function (response) {
//doSomeThingWithResponse
})