I need some guidance on handling asynchronous calls in Angular.
Currently, I am invoking two methods from a service in a controller to fetch an object called "categoryInfo."
How can I ensure that these methods return the categoryInfo correctly and display it as intended?
Controller calling the two methods↓
console.log(this.service.getLargeCategoryList()); ←※This prints out as "undefined"
Method1↓
public getLargeCategoryList(): any {
console.log('Inside getLargeCategoryList');
this.getCategoryInfoList('', ServiceUrls.URL_FOR_TOP_CATEGORY)
.then((data) => {
var categoryInfo: ILCategoryInfoRes[] = data.categoryInfo;
return categoryInfo; ←※It seems like this part is being skipped
}, function (data) {
console.log(data);
alert('Error');
return null;
});
console.log('Exiting getLargeCategoryList');
}
Method2↓
private getCategoryInfoList(parameter: any, serviceUrl: string): ng.IPromise<any> {
var def = this.qService.defer();
this.httpService({
method: 'POST',
url: serviceUrl,
data: parameter
}).success(function (data: any, status, headers, config) {
//Success
var categoryInfo: ILCategoryInfoRes[];
var statusInfo: IStatus[];
//categoryInfo = data.categoryInfo;
statusInfo = data.status;
if (statusInfo[0].statusCode == '000') {
def.resolve(data);
} else {
def.resolve(statusInfo);
}
}).error(function (data, status, headers, config){
//Error
def.reject("Failed");
});
return def.promise;
}