需要从ajax获取价值[重复]

Question

This question already has answers here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call" dir="ltr">How do I return the response from an asynchronous call?</a>
                            <span class="question-originals-answer-count">
                                (38 answers)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2017-12-13 18:00:19Z" class="relativetime">2 years ago</span>.</div>
        </div>
    </aside>

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

</div>

Answer 1

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.