ngservice method called automatically and application stopped - asp.net

Question

my application have some dropdowns and one search button.after selection from dropdown click search button. It will display result based on selected values. I am using web api to fetch data from database. angular service will call those api methods
//for family dropdown
this.getProresultByseriesFamily = function (family) {
var res;
if (family !== 0) {
res = $http.get("/api/KendoCascading/GetProresult/" + family);
return res;
}
};
//for class dropdown
this.getFuseClassRes = function (fuseClass) {
var res;
if (fuseClass !== null) {
res = $http.get("/api/KendoCascading/GetResFuse/" + fuseClass);
return res;
}
};
//for series dropdown
this.getresSeries = function (seID) {
var res;
if (seID !== 0) {
res = $http.get("/api/KendoCascading/GetSeriesResult/" + seID);
return res;
}
};
controller
$scope.getProResult = function () {
if ($scope.SelectedCriteria != null || $scope.SelectedCriteria!="") {
var promise = ngservice.getProresultByseriesFamily($scope.SelectedCriteria);
promise.then(function (resp) {
console.log(resp.data);
$scope.Products = resp.data;
alert("successful1");
}, function (err) {
alert("Falied");
});
}
if ($scope.FuseModel != null || $scope.FuseModel != "") {
var promise = ngservice.getFuseClassRes($scope.FuseModel);
promise.then(function (resp) {
$scope.Products = resp.data;
alert("successful2");
}, function (err) {
alert("failed");
});
}
if ($scope.FuseSeriesModel != null || $scope.FuseSeriesModel != "") {
var promise = ngservice.getresSeries($scope.FuseSeriesModel);
promise.then(function (resp) {
$scope.Products = resp.data;
alert("successful");
}, function (err) {
alert("Failed");
});
}
};
this controller function used as a click event in view. If i call first service method the view populate the result. But after some time it is automatically calling the 3rd service method and application stopped working. What is going wrong? if any better solution exist please help me.
api is working fine . i have checked in browser. It is fine.
view
<Button type="button" ID="Btn_Search" Width="90" Class="btn btn-primary btn-sm" ng-click="getProResult();show=!show">Search</Button>

Answer 1

I think the problem is because sometimes your service returns undefined.
In the third case, which is the one with problem, if $scope.FuseSeriesModel === 0, ngservice.getresSeries($scope.FuseSeriesModel) will return undefined and it will throw an error because you are calling then on undefined.
I would recommend you to update your code to check for the promise before calling .then.
For example:
if ($scope.FuseSeriesModel != null || $scope.FuseSeriesModel != "") {
var promise = ngservice.getresSeries($scope.FuseSeriesModel);
if (promise) {
promise.then(function (resp) {
$scope.Products = resp.data;
alert("successful");
}, function (err) {
alert("Failed");
});
}
}
Another way is to update your if conditions to !!$scope.FuseSeriesModel (or Boolean($scope.FuseSeriesModel)). That way, your promise code will be called only when the value is Truthy which I think is what you really want to do:
if (Boolean($scope.FuseSeriesModel)) { // or $scope.FuseSeriesModel or !!$scope.FuseSeriesModel
var promise = ngservice.getresSeries($scope.FuseSeriesModel);
promise.then(function (resp) {
$scope.Products = resp.data;
alert("successful");
}, function (err) {
alert("Failed");
}
);