CODEWITHSUNDEEP
javascriptjqueryarraysjsonajax
digitalsuite.net
digitalsuite.net

Reputation: 339

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

Upvotes: 0

Views: 282

Answers (4)

Corsin
Corsin

Reputation: 26

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

Upvotes: 0

ajimix
ajimix

Reputation: 992

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 :)

Upvotes: 1

Daniel Z.
Daniel Z.

Reputation: 3348

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.

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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.

Upvotes: 0

Related Questions