How to execute code synchronously in angular js

Question

I am facing one issue as from service i am getting data from service and binding to UI, where some text box and drop down are there i am passing model as it to UI its binding properly.

Issue with drop down its working asynchronously (its my guess). please check below code

vendorService.getVendorDetailsForVendor().then(function(vendorDetails) {
            if (vendorDetails.Id !== 0) {

                $scope.businessType = vendorDetails.BusinessTypeId;
                $scope.vendorType = vendorDetails.VendorTypeId;
                $scope.category = vendorDetails.ShopCategory;
                $scope.discountUnit = vendorDetails.DiscountUnitId;
                $scope.SelectedState = vendorDetails.StateId;
                $scope.SelectedCityId = vendorDetails.CityId;


                if ($scope.businessType != null) {
                    $scope.$apply(function() {
                        for (var i = 0; i < $scope.businessTypeList.data.length; i++) {
                            if ($scope.businessTypeList.data[i].BusinessTypeId === $scope.businessType) {
                                $scope.businessType = i + 1;
                            }
                        }
                    });
                }

                if ($scope.vendorType != null) {
                    $scope.$apply(function() {
                        for (var i = 0; i < $scope.vendorTypeList.data.length; i++) {
                            if ($scope.vendorTypeList.data[i].VendorTypeId === $scope.vendorType) {
                                $scope.vendorType = i + 1;

                            }
                        }
                    });
                }

                if ($scope.category != null) {
                    console.log($scope.category);
                    $scope.$apply(function() {
                        for (var i = 0; i < $scope.categoryList.data.length; i++) {
                            if ($scope.categoryList.data[i].ShopName === $scope.category) {
                                $scope.category = i + 1;
                            }
                        }
                    });
                }


                if ($scope.discountUnit != null) {
                    $scope.$apply(function() {
                        for (var i = 0; i < $scope.discountUnitList.data.length; i++) {
                            if ($scope.discountUnitList.data[i].DiscountUnitId === $scope.discountUnit) {
                                $scope.discountUnit = i + 1;

                            }
                        }
                    });
                }

                if ($scope.SelectedState != null) {
                    $scope.$apply(function() {
                        for (var i = 0; i < $scope.stateList.data.length; i++) {
                            if ($scope.stateList.data[i].Id === $scope.SelectedState) {
                                $scope.SelectedState = i + 1;

                            }
                        }
                    });
                }

                if ($scope.SelectedCityId != null && $scope.SelectedState != undefined) {
                    $scope.$apply(function() {
                        vendorService.getCity($scope.SelectedState).then(function(cityList) {
                            $scope.cityList = {};
                            $scope.cityList.data = cityList;
                            for (var i = 0; i < $scope.cityList.data.length; i++) {
                                if ($scope.cityList.data[i].Id === $scope.SelectedCityId) {
                                    $scope.SelectedCity = $scope.SelectedCityId;
                                }
                            }
                        }, function() {
                            alert("error while fetching from server");
                        });
                    });
                }
                $scope.$apply(function() {
                    $scope.inputData = vendorDetails;
                });
                     $scope.loading = false;
            }
        }, function() {
            alert("error while fetching from server");
        });

I am getting error in chrome console as

Error : Cannot read property 'data' of undefined

Answer 1

Handel null check with angular js with the type defined. this works because of the == difference from === in javascript, which converts some values to "equal" values in other types to check for equality, as opposed for === which simply checks if the values equal. so basically the == operator know to convert the "", null, undefined to a false value. which is exactly what you need.

Answer 2

You should check if there is something defined, not if it's different from null. Like this:

// returns true if it is a truly value (object, array, number bigger than 0, ...)
// returns false if it is a falsy value (0, '', undefined, null)

if ($scope.category) {
    // ... code
}

Here is a cool link that explains this.