Getting return value from inside [an ajax] function

Question

how do I get the return value of "res" from the function. It shows undefined when i try to access it.

function solution() {
  var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
    keyAPI = "abcdefgh"
  var xhr = new XMLHttpRequest(),
    textAPI = "some text",
    langAPI = "fr"
  data = "key=" + keyAPI + "&text=" + textAPI + "&lang=" + langAPI;
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(data);
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var res = this.responseText;
      return res;
    }
  }
}

You cant use the return to return the result of an asynchronous request from function.. — Zakaria Acharki
– Zakaria Acharki, Commented Feb 23, 2017 at 11:09
I want the function "solution" to return the value of "res". How do i store the return value in a variable outside the function ? — Ehtesham Shareef
– Ehtesham Shareef, Commented Feb 23, 2017 at 11:10
You can't, that's not how asynchronous code works. See duplicate for more info: stackoverflow.com/questions/14220321/… — fdomn-m
– fdomn-m, Commented Feb 23, 2017 at 11:12
Possible duplicate of How do I return the response from an asynchronous call? — fdomn-m
– fdomn-m, Commented Feb 23, 2017 at 11:12

VJAI · Accepted Answer · 2017-02-23 11:22:02Z

1

You've to use either Promise or callback approach to achieve that. Promise is relatively new and not supported in all browsers.

Promise approach

function solution() {
  return new Promise(function(resolve, reject) {
    var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
      keyAPI = "abcdefgh"
    var xhr = new XMLHttpRequest(),
      textAPI = "some text",
      langAPI = "fr"
    data = "key=" + keyAPI + "&text=" + textAPI + "&lang=" + langAPI;
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
    xhr.onreadystatechange = function() {
      if (this.readyState == 4) {
        var res = this.responseText;
        this.status == 200 ? resolve(res) : reject('error');
      }
    }
  });
}

How to get the response

solution().then(function(res) {
  console.log(res);
}, function(err) {
  console.log(err);
});

Callback approach

function solution(success, failure) {
  var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
    keyAPI = "abcdefgh"
  var xhr = new XMLHttpRequest(),
    textAPI = "some text",
    langAPI = "fr"
  data = "key=" + keyAPI + "&text=" + textAPI + "&lang=" + langAPI;
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(data);
  xhr.onreadystatechange = function() {
    if (this.readyState == 4) {
      var res = this.responseText;
      this.status == 200 ? success(res) : error('error');
    }
  }
}

How to get response

solution(function(res) {
  console.log(res);
}, function(err) {
  console.log(err);
});

edited Feb 23, 2017 at 11:22

answered Feb 23, 2017 at 11:16

VJAI

32.9k23 gold badges108 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ehtesham Shareef Over a year ago

is there any other way i could get the value of res from the function to be used outside of it ? i just want the response from the xhr to be extracted as a string from the function and stored in a variable for string comparison. the console.log() is not displaying anything

TechVision · Accepted Answer · 2017-02-23 11:16:45Z

0

You can try this way. Hope its works-

So your XHR function have one callback function to get the return value,

function solution(callback) {
  var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
      keyAPI = "abcdefgh";
  var xhr = new XMLHttpRequest(),
      textAPI = "some text",
      langAPI = "fr";
  data = "key=" + keyAPI + "&text=" + textAPI + "&lang=" + langAPI;
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(data);
  xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
       var res = this.responseText;
       callback(res);
     }
   }
}

when you are calling the XHR function:

solution(function(response){
  // you will get the response over here 
});

answered Feb 23, 2017 at 11:16

TechVision

2691 silver badge11 bronze badges

1 Comment

Ehtesham Shareef Over a year ago

is there any other way i could get the value of res from the function to be used outside of it ? i just want the response from the xhr to be extracted as a string from the function.

Collectives™ on Stack Overflow

Getting return value from inside [an ajax] function

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related