CODEWITHSUNDEEP
jqueryajaxrestag-grid
Natasha
Natasha

Reputation: 281

Unable to pass data from ajax function after doing async false

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?

Upvotes: 1

Views: 826

Answers (2)

Jarod Moser
Jarod Moser

Reputation: 7348

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();

        }
    });
}

Upvotes: 0

Barmar
Barmar

Reputation: 782285

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?

Upvotes: 0

Related Questions