0

Hey I have been trying to figure this out for a while now but my script is behaving unexpectedly. I can not understand the execution flow of the following script.

My Script:

$scope.getEmployeeQualifications = function () {
    if ($scope.displayEmpQualification) {
        $scope.displayEmpQualification = false;
    }
    else {
        $scope.loading = true;
        $scope.displayEmpQualification = true;

        $http.get('/ERPProduct/api/CEmployeeQualificationsApi/' + this.employee.cEmployeeId + '/').success(function (data) {
            $scope.employeeQualifications = [];

            for (var item = 0; item < data.length; item++)
            {
                if (data[item].contId) {
                    $http.get('/ERPProduct/api/CountriesApi/' + data[item].contId + '/').success(function (test) {
                        data[item].contId = test.contName;
                    });
                }
                if (data[item].cityId) {
                    $http.get('/ERPProduct/api/CitiesApi/' + data[item].cityId + '/').success(function (test) {
                        alert("First Test");
                        data[item].cityId = test.cityName;

                    });
                }
            }
            alert("Test");
            $scope.employeeQualifications = data;
            $scope.loading = false;
        }).error(function (data) {
            $scope.error = "An Error has occured while Saving office! " + data;
            $scope.loading = false;
        });
    }
};

Expected Behaviour:

I expect the above script to first display the alert("First Test"); and complete the loop and when it has completed the loop it should display the alert("Test");.

Actual Behaviour:

The script is not behaving as it should but rather displaying the alert("Test"); and then when I press Okay then it continues to execute the loop.

My Question

As I have described above that I can not understand the above script behaviour.

  • What is the execution flow of the above script?
  • What are the reasons for that flow ?
  • Am I making any mistakes in the above script that are causing unexpected behaviour and execution flow of the above script?

Thanks.

Syed Farjad Zia Zaidi
  • 3,302
  • 4
  • 27
  • 50
  • @dystroy then how does the alert display correct item? I mean if the loop has already been executed then item = the last element; but it starts displaying all the elements from the start to the end? also if its too long and you did not read it completely then you should not have closed the question. because the question you marked duplicate does not answer any of my questions. – Syed Farjad Zia Zaidi Nov 19 '14 at 10:11
  • The `for` loop is completely executed before the callbacks you pass to `$http.get` are called. Is that clearer now ? – Denys Séguret Nov 19 '14 at 10:17
  • @dystroy I know what you meant by the callbacks, but I do not understand how and why the `for` loop is completely executed before callbacks. – Syed Farjad Zia Zaidi Nov 19 '14 at 10:19
  • Before the script doesn't stop to wait for the server to answer your HTTP queries. So when the browser receives the responses, the loop is finished and "Test" has been displayed. – Denys Séguret Nov 19 '14 at 10:21
  • @SyedFarjadZiaZaidi because that's how asynchronous works. You call a function and give a callback, *sometime in the future* that callback is called. But the `for` loop happens *now*. – Madara's Ghost Nov 19 '14 at 10:22
  • @SecondRikudo can I make this work synchronous? – Syed Farjad Zia Zaidi Nov 19 '14 at 10:25
  • 1
    No you can't. Highly suggested reading if you want to grasp asynchronicity : http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Denys Séguret Nov 19 '14 at 10:30

0 Answers0