Getting Data From Ajax Request Displayed

I've already read this article How do I return the response from an asynchronous call? However I couldn't come up with a solution. I'm doing an ajax request function getdata(url)

Solution 1:

The problem is that you are using an asynchronous method expecting a synchronous result.

Therefore you should use the code in the result of the asynchronous call like the following:

functiongetdata(url) {
  console.log('Started');
  jQuery.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    error: function(xhr) {
      console.log('Error', xhr.status);
    },
    success: function(chinese) {
      var text = chinese[Math.floor(Math.random()*chinese.length)];
      // Do something else with text
    }
  });
}

getData('http://myserver.com/myscript.php');

I hope it helps :)

Solution 2:

The error you get is because of the asynchronous nature of the call. I suggest you to assign the value after you get the success response from the API like below.

var chinese = getdata();

Then the function getdata() will be like

functiongetdata(url) 
 {
 console.log('Started');
 jQuery.ajax({
 type: "GET",
 url: "http://myserver.com/myscript.php",
 dataType: "json",
 error: function(xhr) {
    console.log('Error',xhr.status);
        },
 success: function(response) {
     initChinese(response.data);

         }
    });
 }

And create a function initChinese() like

var text;
functioninitChinese(chinese){
 text = chinese[Math.floor(Math.random()*chinese.length)];
}

You can also declare the text variable in global scope and then assign the value to text variable inside the success function without having to create a new function initChinese.

Solution 3:

The problem is your getdata function does not return anything. In your getdata function you're doing a ajax request, which is an asynchronous request. So the data you're requesting won't, and can't be returned with your getdata function.

But you will have the requested data in your success function:

functiongetdata(url) 
 {
 console.log('Started');
 jQuery.ajax({
 type: "GET",
 url: "http://myserver.com/myscript.php",
 dataType: "json",
 error: function(xhr) {
    console.log('Error',xhr.status);
        },
 success: function(response) {
   console.log('Success',response);
var text = response[Math.floor(Math.random()*response.length)];
         }
    });
 }

As I'm not able to test your code, you've to debug the rest on your own. But the response variable will be most likely your "chinese" variable.

Solution 4:

You could try using callbacks or you could look at Promises.

The idea with callbacks is that you pass a function that is run after the ajax request is finished. That callback can accept a parameter, in this case the response. Using callbacks:

functiongetData(url, successCallback, errorCallback) {
  console.log('Started');

  jQuery.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    error: function(xhr) {
      errorCallback(xhr.status);
    },
    success: function(response) {
      successCallback(response);
    }
  });
}

var chinese;

getData("http://myserver.com/myscript.php", function(response) {
  chinese = response; // you can assign the response to the variable here.
}, function(statusCode) {
  console.error(statusCode);
});

Using Promises (< IE11 doesn't support this):

functiongetData(url) {
  returnnewPromise(function(resolve, reject) {
    console.log('Started');
    
    jQuery.ajax({
      type: "GET",
      url: url,
      dataType: "json",
      error: function(xhr) {
        reject(xhr.status);
      },
      success: function(response) {
        resolve(response);
      }
    });
  });
}

var chinese;

getData("http://myserver.com/myscript.php").then(function(response) {
  chinese = response;
  console.log(chinese);
}, function(statusCode) {
  console.error(statusCode);
});