Getting Data from Ajax request displayed

Question

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

         }
    });
 }

And Console displays everything fine but when I say

var chinese = getdata();

to get the data. I keep getting:

Uncaught TypeError: Cannot read property 'length' of undefined error for this line

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

Can anybody help me here?

You output `response` to the console, not storing any variable. — Adam Azad, Jun 27 '17 at 07:56
That's the same question as the one you've asked 2 hours ago which you've deleted after it has been closed as a duplicate... — Andreas, Jun 27 '17 at 07:59
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, Jun 27 '17 at 08:00

score 1 · Accepted Answer · answered Jun 27 '17 at 08:01

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:

function getdata(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 :)

Nice Thank you man. it actually worked. I was thinking about this for soooo many days. — digitalsuite.net, Jun 27 '17 at 10:04

score 0 · Answer 2 · answered Jun 27 '17 at 07:59

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

function getdata(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;
function initChinese(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.

score 0 · Answer 3 · answered Jun 27 '17 at 08:00

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:

function getdata(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.

score 0 · Answer 4 · answered Jun 27 '17 at 08:18

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:

function getData(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):

function getData(url) {
  return new Promise(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);
});

When I used this code console gives me started but then there comes nothing. If I try to call the function getata(); from the console it says that it isnt defined, any ideas ? — digitalsuite.net, Jun 27 '17 at 09:39
Made the asynchronus call synchron. I took ajimix's answer because I could call the function after the ajax request has initlialized and the use the data — digitalsuite.net, Jun 27 '17 at 23:58

Getting Data from Ajax request displayed

4 Answers4

Linked