How to return data from ajax success function?

In my front end JavaScript application, I make an ajax request to fetch data from the server. As soon as I get the data, I want to return that piece of information to the view.

var view_data;
$.ajax({
    url:"/getDataFromServer.json",
    //async: false,
    type: "POST",
    dataType: "json",
    success:function(response_data_json) {
        view_data = response_data_json.view_data;
        console.log(view_data); //Shows the correct piece of information
        return view_data; // Does not work. Returns empty data
    }
 });

 // return view_data; --> Keeping the return outside of the ajax call works but then I need to make my ajax call synchronous in order for this return clause to be executed after the ajax call fetches data.

How would I do this?

Answers:

Answer

Instead of returning data from success: pass data to a function.

var view_data;
$.ajax({
    url:"/getDataFromServer.json",
    //async: false,
    type: "POST",
    dataType: "json",
    success:function(response_data_json) {
        view_data = response_data_json.view_data;
        console.log(view_data); //Shows the correct piece of information
        doWork(view_data); // Pass data to a function
    }
 });

function doWork(data)
{
    //perform work here
}
Answer

ajax is by nature asyc. The code doesn't wait for the response from your success callback, so the data isn't accessible outside of success unless passed.

You'd need to handle the data inside the success, try calling a separate method/function:

function handleResponse(data) {
    // do something with data
}

success:function(response_data_json) {
    handleResponse(response_data_json.view_data); 
}

here are the docs on jquery's ajax method

You could also just use an external success function rather then an annon inline that then calls the function anyway. it will still pass the data as a param

function handleResponse(data) {
  // do something
}

$.ajax({
    url:"/getDataFromServer.json",
    //async: false,
    type: "GET",
    dataType: "json",
    success:handleResponse
 });

UPDATE: as pointed out in the comments, you might be better using a http get request rather then a post. they both have advantages however get requests can be cached, so for retrieving data it might give a perf boost.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.