Angular 4 how to update value of class within callback function?

Question

I have this code where my "this.index" and "this.result" are undefined, how do I make it so that when I update their values it acts like pass by reference:

  submitQuiz(addsMemberPoints, pointsCallback) {
    this.getValues(this.answers, this.totalPoints, this.index, function(answers, totalPoints, ranks, index){
      pointsCallback(answers, ranks, addsMemberPoints, totalPoints, index, function(index, points){
        function getMember(obj) {
          return Object.keys(obj).reduce(function(a, b){ return obj[a] > obj[b] ? a : b });
        }
        // would like to change index and result of initial class with new values
        this.result = getMember(points);
        this.index = index;
      });
    });

  }

The error that is created is reproduced here.

score 0 · Answer 1 · answered Jan 05 '18 at 22:52

By using the 'that' trick.

submitQuiz(addsMemberPoints, pointsCallback) {
    var that = this;

    this.getValues(this.answers, this.totalPoints, this.index, function(answers, totalPoints, ranks, index){
      pointsCallback(answers, ranks, addsMemberPoints, totalPoints, index, function(index, points){
        function getMember(obj) {
          return Object.keys(obj).reduce(function(a, b){ return obj[a] > obj[b] ? a : b });
        }
        // changed this to that
        that.result = getMember(points);
        that.index = index;
      });
    });

  }

score 0 · Answer 2 · answered Jan 05 '18 at 23:20

0

Why not use the arrow functions?

Arrow functions do not lose the current this context allowing you to access it without defining that or self variables.

Check out this ES6 example and have a look at getCommaSaperatedImages function -

class Hotel {

  constructor(images) {
    if (images && images.length) {
      this.images = images;
    }
  }

  getCommaSaperatedImages() {
    this.imageString = "";
    if (this.images && this.images.length) {
      this.images.forEach((image, index, images) => {
        //notice here `this` is still pointing to `Hotel` class.
        this.imageString += image.url;
        if (index === images.length - 1) {
          return;
        }
        this.imageString += ", ";
      });
    }
    return this.imageString;
  }
}

let hotel = new Hotel([{
  id: 1,
  url: 'http://image1.png'
}, {
  id: 2,
  url: 'http://image2.png'
}]);

console.log(hotel.getCommaSaperatedImages());

Typescript should work exactly the same.

I hope this helps :).

answered Jan 05 '18 at 23:20

planet_hunter

3,866
1
26
39

This is a correct answer, but since this is such a basic question that has already been answered, it's better to mark it as a duplicate so we don't have multiple sources of the same truth – Ruan Mendes Jan 05 '18 at 23:25
That makes sense! Thanks!! – planet_hunter Jan 05 '18 at 23:26
@JuanMendes I think my reputation isn't sufficient enough to mark the question as duplicate. :| – planet_hunter Jan 05 '18 at 23:30
I know, there are times that new people are tempted to leave an answer to get around some of the limitations imposed by SO. But there's a reason for the limitation in most cases :) – Ruan Mendes Jan 05 '18 at 23:43

Angular 4 how to update value of class within callback function?

2 Answers2