How to retrieve result from a function returning an ajax

Question

I have a function that is expecting a result from an ajax call and assign it to the variable to result is successfully assigned to the variable but my problem is that how can I extract it?

Here is my code, I tried using $.each to variable but it is undefined

<script type="text/javascript">
    $(function () {
        var branches = GetBranches();

        console.log(branches);

        //$.each(branches.d, function (key, val) {
        //    console.log(val.BranchCode);
        //})

        function GetBranches() {
            return $.ajax({
                type: 'POST',
                url: 'testWS.asmx/GetBranches',
                contentType: 'application/json; charset=utf-8',
                dataType: 'JSON'
            });
        }
    });
</script>

Here is my screenshot for the console.log(branches)

I want to retrieve/extract data from the responseJSON. How can possibly do this?

Answer 1

The jqXHR Object

$.ajax() returns jQuery XMLHttpRequest(jqXHR) object.

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information). These methods take one or more function arguments that are called when the $.ajax() request terminates. This allows you to assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. (If the request is already complete, the callback is fired immediately.) Available Promise methods of the jqXHR object include:

1. jqXHR.done(function( data, textStatus, jqXHR ) {});
2. jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
3. jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });
4. jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});

So,

$(function () {
    var branches = GetBranches(); // return you jqXHR Object.
    brances.done(function (data, textStatus, jqXHR) { // assign callback function when your AJAX request completes.
        console.log(data); // here is data you are looking for
    });

    function GetBranches() {
        return $.ajax({
            type: 'POST',
            url: 'testWS.asmx/GetBranches',
            contentType: 'application/json; charset=utf-8',
            dataType: 'JSON'
        });
    }
});

Refer $.ajax, Deferred Object

Answer 2

Try this -

   function GetBranches() {
        $.ajax({
            type: 'POST',
            url: 'testWS.asmx/GetBranches',
            contentType: 'application/json; charset=utf-8',
            dataType: 'JSON',
           success: function(response) {
                  return response;
               }
        });
   }

Answer 3

You can use AJAX success

<script type="text/javascript">
    $(function () {
        var branches = GetBranches();

        console.log(branches);



        function GetBranches() {
            return $.ajax({
                type: 'POST',
                url: 'testWS.asmx/GetBranches',
                contentType: 'application/json; charset=utf-8',
                dataType: 'JSON',
success:function(data){
// Here you will get the data returned from response
}
            });
        }
    });
</script>