Array variable after calling $.ajax become empty

Question

I populate my departmentName in an array using ajax. during the $.each the departmentName has a value but after end of ajax when I log the departmentName it doesn't have a value.

      $("#Search").click(function () {
            var titleId = $("#title").val();
            var departmentGenericId = $("#department").val();
            var startDate = $("#startDate").val();
            var endDate = $("#endDate").val();

            var departmentName = [];
            var complianceValue = [];
            var nonComplianceValue = [];
            var complianceRate = [];
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '/AcknowledgementAdminLevel/AcknowledgemetnComplianceRate/',
                data: {"titleId": titleId, 
                    "departmentGenericId" : departmentGenericId, 
                    "startDate" : startDate,
                    "endDate" : endDate
                },
                dataType: "json",
                success: function (data) {                                       
                    $.each(data, function () {                            
                        departmentName.push(this.DepartmentName);
                        complianceValue.push(this.Compliance);
                        nonComplianceValue.push(this.NonCompliance);
                        complianceRate.push(this.ComplianceRate);                            
                    });
                }                   
            });               
            console.log(departmentName);               
        });

This question is asked a gazillion time every day. Please do a search before asking. — Denys Séguret, Sep 10 '13 at 11:46
I'm pretty sure `departmentName` does have a value, namely `[]` (empty array). — Halcyon, Sep 10 '13 at 11:47
ajax calls are asynchronous. you can't rely on them to complete before your next statement in the caller context is executed ... actually, you'd rather rely on the opposite ... — collapsar, Sep 10 '13 at 11:48
@MoazzamKhan No, please don't recommend async:false : it blocks the UI until the request answers ! — Denys Séguret, Sep 10 '13 at 11:51

DavidWainwright · Answer 1 · 2013-09-10T12:52:01.853

0

The ajax call is being called asynchronously, therefore departmentName will not have been populated when the console.log statement is executed. You can set the ajax call to perform synchronously if you really want to by adding the async option as follows:

$.ajax({
        async: false,
        //...

to the options. The ajax call will then wait for the response before proceeding execution.

edited Sep 10 '13 at 12:52

answered Sep 10 '13 at 11:54

DavidWainwright

2,647
1
24
29

Why answer when long before that we linked to proper QA while voting to close ? BTW this is a bad answer, don't recommend sync requests. – Denys Séguret Sep 10 '13 at 11:58
1

I answered because he asked, and I'm well aware it's bad practice to use sync requests, hence 'You can set the ajax call to perform synchronously *if you really want to*' - wind your neck in - I'd hate SO to become like the perl community. – DavidWainwright Sep 10 '13 at 12:27

Array variable after calling $.ajax become empty

1 Answers1