How to set value to public variable in ajax method?

Question

I try to use result of ajax in outer of ajax method and wrote this code but get error that :

TypeError: foods is null    

for (var j = 0; j <foods.obj.length; j++) {

$(document).ready(function () {
            var foods = null;
            $.ajax({
                url: '/Train/TrianFood',
                data: { Tarrif: 1 },
                type: "POST",
                context: this,
                success: function (result) {foods = result;},
                error: function () {}
            });
            var parentOfFood = $('#accordion1 .person-information');
            for (var i = 0; i < parentOfFood.length; i++) {
                var foodSelect = $(parentOfFood[i]).find('select[name$=Food]');

                for (var j = 0; j <foods.obj.length; j++) {

                    foodSelect.append(new Option(foods.obj[j].ServiceType, foods.obj[j].ServiceTypeCode));
                }
            }
       });

How to fix this?

one possible reason is, the ajax response is not coming to success callback. can you put a console.log statement in both success and error callbacks and see, what is happening? — Jacob Nelson, May 19 '16 at 11:52

score 1 · Accepted Answer · answered May 19 '16 at 11:56

It's because loop is being execute before ajax response callback. To fix the problem create a function & execute it after ajax response.

Try following way-

$(document).ready(function () {
    var foods = null;
    $.ajax({
        url: '/Train/TrianFood',
        data: { Tarrif: 1 },
        type: "POST",
        context: this,
        success: function (result) {
            foods = result;
            foodSelectHandler();
        },
        error: function () {}
    });
    var parentOfFood = $('#accordion1 .person-information');

    function foodSelectHandler(){
        for (var i = 0; i < parentOfFood.length; i++) {
            var foodSelect = $(parentOfFood[i]).find('select[name$=Food]');

            for (var j = 0; j <foods.obj.length; j++) {

                foodSelect.append(new Option(foods.obj[j].ServiceType, foods.obj[j].ServiceTypeCode));
            }
        }
    }

});

score 1 · Answer 2 · answered May 19 '16 at 11:57

I happens because of asynchronous call. Your for loop runs before the ajax success call and thus foods doesn't contain any information. try writing the code in the success function itself.

$(document).ready(function () {
                    var foods = null;
                    $.ajax({
                        url: '/Train/TrianFood',
                        data: { Tarrif: 1 },
                        type: "POST",
                        context: this,
                        success: function (result) {foods = result;
                                  var parentOfFood = $('#accordion1 .person-information');
                                  for (var i = 0; i < parentOfFood.length; i++) {
                                  var foodSelect = $(parentOfFood[i]).find('select[name$=Food]');

                                  for (var j = 0; j <foods.obj.length; j++) {

                                      foodSelect.append(new Option(foods.obj[j].ServiceType, foods.obj[j].ServiceTypeCode));
                                  }
                                  }
                               }, 
                        error: function () {}
                    });

               });

Another method is to call a function from within an ajax success call that contains the for loop.

score 1 · Answer 3 · answered May 19 '16 at 11:57

The issues concerns the fact that you are running an asynchronous function before assigning a value to foods. That is a problem since the value foods could be assigned the value only when the request is successful. There is no way to know how long it would take or whether the request will ever be successful. That is a classic situation of racing condition.

This is the way you should adjust your code:

$(document).ready(function() {
var foods = null;
$.ajax({
    url: '/Train/TrianFood',
    data: {
        Tarrif: 1
    },
    type: "POST",
    context: this,
    error: function() {},
    success: appendFood

});

function appendFood(result) {
    foods = result;
    var parentOfFood = $('#accordion1 .person-information');
    for (var i = 0; i < parentOfFood.length; i++) {
        var foodSelect = $(parentOfFood[i]).find('select[name$=Food]');

        for (var j = 0; j < foods.obj.length; j++) {

            foodSelect.append(new Option(foods.obj[j].ServiceType, foods.obj[j].ServiceTypeCode));
        }
    }
}
});

score 0 · Answer 4 · edited Nov 08 '21 at 04:45

Following Code execute before success callback of ajax, thus foods remain null.

var parentOfFood = $('#accordion1 .person-information');
for (var i = 0; i < parentOfFood.length; i++) 
{
    var foodSelect = $(parentOfFood[i]).find('select[name$=Food]');

    for (var j = 0; j <foods.obj.length; j++) 
    {
        foodSelect.append(new Option(foods.obj[j].ServiceType, foods.obj[j].ServiceTypeCode));
     }
 }

Put those code under success call back.

How to set value to public variable in ajax method?

4 Answers4