javascript object using 'this'

Question

Part of my code

var tablo = {
    tablo_id: 0,
    retrivedData: 1234,
    getData: function() {
      var xhr;
      var data = "aranan=" + document.getElementById('aranan').value;

      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            this.retrivedData = JSON.parse(xhr.responseText);
            console.log(this.retrivedData); //first
          }
        }

        xhr.open("POST", "listele.php", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
      },

      setData: function() {
        console.log(this.retrivedData); //Second  
      }
    }
}
function u() {
  tablo.getData();
  tablo.setData();
}

When I run function u() first console.log work but seconde one does not work ,second only returns 1234 . I use function u() in button onclick event

You need to define what "work" and "does not work" mean. Provide expected output and actual output, plus any error messages if there are any. — RobG, Jun 11 '16 at 09:24

Parag Bhayani · Accepted Answer · 2016-06-11T10:39:34.823

1

It is because, you are sending async AJAX Request, in javascript by default all ajax requests are async. Async request won't wait for response, it will send the AJAX request and will continue it's invocation (which is indeed a feature) because meanwhile server is responsing, you can execute other code on javascript

So actual sequence of your execution is function getData() -> send request -> function setData() -> console.log("second") -> receive response -> console.log("first")

You can try below code, and let me know whether it solves your problem or not

var tablo = {
    tablo_id: 0,
    retrivedData: 1234,
    getData: function() {
      var xhr;
      var data = "aranan=" + document.getElementById('aranan').value;
      var that = this;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            that.retrivedData = JSON.parse(xhr.responseText);
            console.log("First :",that.retrivedData); //first
            that.setData();
          }

        }

        xhr.open("POST", "listele.php", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);

      },

      setData: function() {
          console.log("Second :",this.retrivedData); //Second  
        },

    }
}

function u() {
  tablo.getData();
  //tablo.setData();
}

edited Jun 11 '16 at 10:39

answered Jun 11 '16 at 09:26

Parag Bhayani

3,280
2
28
52

so how can I change this situation – Gungor Celik Jun 11 '16 at 09:44
@GungorCelik: it depends on what you want to achieve, would you be more clear with your question, then I could help you... – Parag Bhayani Jun 11 '16 at 09:45
I just transfer data from getData function to SetData function that has codes for filling table cells with loop – Gungor Celik Jun 11 '16 at 10:03
@GungorCelik: Okay then you need to call that function once you receive response, so on readystate change you can call a callback function – Parag Bhayani Jun 11 '16 at 10:05
I understand but I do not know how I do it – Gungor Celik Jun 11 '16 at 10:08
@GungorCelik : Did my answer helped you? – Parag Bhayani Jun 11 '16 at 10:19
:163 Uncaught TypeError: this.setData is not a function – Gungor Celik Jun 11 '16 at 10:36
@GungorCelik: Updated the answer a little bit have a look at it, and let me know whether it works.. – Parag Bhayani Jun 11 '16 at 10:40
now returns 1234 – Gungor Celik Jun 11 '16 at 10:48
That is totally strange it is working for me, would you show me all console dumps... @GungorCelik – Parag Bhayani Jun 11 '16 at 11:01
I forget to change one "this" to that now work thankss – Gungor Celik Jun 11 '16 at 11:15

score 0 · Answer 2 · answered Jun 11 '16 at 09:24

0

To preserve the ´this´ scope, you should save the reference to this (var _this = this) before of defining xhr.onreadystatechange = ... and use it into the callback instead of this.

answered Jun 11 '16 at 09:24

Dario

3,905
2
13
27

score 0 · Answer 3 · answered Jun 11 '16 at 09:25

That behaviour is caused by the fact, that this in a callback does not point to the object, but rather to window. So essentially, you are setting window.retrivedData instead of the object's retrievedData. To solve that problem, you have the following options:

1) Bind the correct this to the callback by using:

xhr.onreadystatechange = function() {
    // [...]
}.bind(this)

2) Manually set this by using:

var self = this;
xhr.onreadystatechange = function() {
    // here do not use "this" but "self" instead
}

3) Use the fat-arrow notation of ES6:

xhr.onreadystatechange = () => {
    // [...]
}

But be aware that ES6 is not (fully) supported by most browsers, yet. You need to transpile your code, for example, with Babel.

Also not that it is "retrieved" and not "retrived".

javascript object using 'this'

3 Answers3