Unable to pass data from ajax function after doing async false

Question

I create a rest service and now I'm trying to create a gui with the data. Right now, my index.html looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="loadingGrid.js"></script>
<script type="text/javascript" src="sortGrid.js"></script>
<script type="text/javascript" src="ag-grid-enterprise.js"></script>
  </head>
<title>Insert title here</title>
</head>
<body> 
<div id="myGrid" style="width: 100%; height: 71%;" class="ag-blue">
</div>
</body>
</html>

And my file1.js looks like this:

var rootURL = "http://localhost:8181/RestServiceProject/rest/WebService/getdata";
function findByName() {
    $.ajax({
        type: 'GET',
        url: rootURL,
        dataType: "json",
        async: false,
        success: function(json){  return json;    }
    });
}
(function(){
 var columnDefs = [
     {headerName: "CLIENT", field: "CLIENT_ACRONYM", width: 150, unSortIcon: true},
    {headerName: "SYM", field: "SYM", width: 150, unSortIcon: true, filter: 'set'},

];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true

};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
   var jsondata = findByName()
var json = JSON.parse(jsondata);

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

var parsedData = json.map(function(obj) {
    return Object.keys(obj).reduce(function(memo, key) {
        var value = obj[key];
        memo[key] = isNumeric(value) ? Number(value) : value;
        return memo;
    }, {})
});

gridOptions.api.setRowData(parsedData);
autoSizeAll();

});
})()

So, when go to localhost:8181/RestServiceProject, it goes to myGrid div. Then in file1.js I have made a jQuery ajax function, where I want to return data on success so I've made async: false, I'm calling the findByName() function below in file1.js and saving the value returned in var json as var json = findByName(). But json variable is coming undefined. Why is this so?

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jarod Moser, Oct 27 '16 at 21:19

Jarod Moser · Answer 1 · 2016-10-27T22:51:21.407

Your findByName function isn't returning anything that is why your jsondata variable isn't holding any data. What is better is to run the function where you are setting the data in the success function like so:

function findByName() {
    $.ajax({
        type: 'GET',
        url: rootURL,
        dataType: "json",
        async: false,
        success: function(data){  
             var json = JSON.parse(data);

             function isNumeric(n) {
                 return !isNaN(parseFloat(n)) && isFinite(n);
             }

             var parsedData = json.map(function(obj) {
                 return Object.keys(obj).reduce(function(memo, key) {
                     var value = obj[key];
                     memo[key] = isNumeric(value) ? Number(value) : value;
                     return memo;
                 }, {})
             });

             gridOptions.api.setRowData(parsedData);
             autoSizeAll();

        }
    });
}

I don't think this will work. `$.ajax` returns a `jqXHR`, not the value returned by the callback function. — Barmar, Oct 27 '16 at 21:36
You are probably right, I was recently coding with Angular 2 and their ajax/http method returned data so I thought it might work. I will edit with a proper solution — Jarod Moser, Oct 27 '16 at 22:46

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

You're returning from the callback function, that's not the same as returning from findByName(). You can do what you want by setting a variable in the callback function and then returning that from the containing function.

function findByName() {
    var returnVal;
    $.ajax({
        type: 'GET',
        url: rootURL,
        dataType: "json",
        async: false,
        success: function(json){  returnVal = json;    }
    });
    return returnVal;
}

However, it would be better if you designed your application so it worked with asynchronous AJAX. Synchronous AJAX is deprecated. See How do I return the response from an asynchronous call?

edited May 23 '17 at 12:06

Community

1
1

answered Oct 27 '16 at 21:35

Barmar

741,623
53
500
612

If OP takes your suggestion and decides to use async ajax, then I don't think your option will work since returnVal won't get set to json until successful completion of the ajax – Jarod Moser Oct 27 '16 at 22:53
1

That's true. My advice was to redesign using async *instead* of using that code. – Barmar Oct 27 '16 at 23:09

Unable to pass data from ajax function after doing async false

2 Answers2