need to get value from ajax

Question

I am calling getValues function on document ready function.

jQuery(document).ready(function () {

        getValues();

    });

getValues function is given below.It is calling a getOffValue function.

var getValues= function() {
    var html = '';

    jQuery.ajax({
        url: 'controller/function',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            jQuery.each(data, function (index, element) {
              rate=getOffValue(element.off_id);

                        html += '<div class="col-md-3" style="padding:10px"><div class="row"></div></div>';


            });
            jQuery("#div").append(html);




        },
        error: function (data) {
            alert("Error" + data);
        }

    });

}

getOffValue function is given below. need to return its result to calling function.

var getOffValue = function(id) {
    var html = '';

   return jQuery.ajax({
        url: 'controller/function1',
        type: 'POST',
        dataType: 'json',
        data: {off_id:id},
        success: function (data) {
            return data[0].rate;
            },
        error: function (data) {
            alert("Error" + data);
        }

    });

}

I need to return the success result of getOffValue function to the function getOffValue. Need to get that value in rate variable.and need to append that value in html.but this code not working.showing the value as undefined.thanks in advance

Ajax is an async call so you have to use Promises/Observables for this functionality — dev7, Dec 13 '17 at 17:50

score -1 · Accepted Answer · answered Dec 13 '17 at 17:58

You can try using Promises. This code has not been tested and is not optimized but should explain the concept.

function getOffValue(id) {
    var deferred = jQuery.Deferred();
    jQuery.ajax({
        url: 'controller/function1',
        type: 'POST',
        dataType: 'json',
        data: {off_id:id},
        success: function (data) {
            return deferred.resolve(data[0].rate);
        },
        error: function (data) {
            alert("Error" + data);
            return deferred.reject(data);
        }

    });
    return deferred.promise();
}

var getValues= function() {
    var html;
    jQuery.ajax({
        url: 'controller/function',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            jQuery.each(data, function (index, element) {
                getOffValue(element.off_id).then(function(rate) {
                    console.log('rate', rate); //you need to append it to the html
                    html = '<div class="col-md-3" style="padding:10px"><div class="row"></div></div>';
                    jQuery("#div").append(html);
                });
            });
        },
        error: function (data) {
            alert("Error" + data);
        }
    });
}

Keep in mind that you are doing multiple ajax calls to controller/function1 - for performance, you should probably optimize that so that function1 returns an array of rates.

This is a different questions but theoretically you can do whatever you want with the value e.g. `html = "
"+rate+"
"`. Please mark as resolved if answered your original question. — dev7, Dec 13 '17 at 18:37

need to get value from ajax

1 Answers1