0

I'm new to typescript. I've tried searching through answers here but none of the solutions seem to fit.

I have a relatively simple (I guess) problem. The data that I get with profilesArr arrays are correct, but I can't seem to pass that data to the array "profiles" that I declared at the start of the class. It does, however, pass the data from profilesArr correctly to the locally declared array called "array". I can obtain the data from "array" easily, but when I run this line of code this.profiles[i]=profilesArr[k]; it gives me the error: Cannot read property 'profiles' of null.

export class RegisteredusersPage {

  private profileListRef = this.db.list<Profile>('profile-list');
  constructor(public navCtrl: NavController, public navParams: NavParams,     private storage: Storage,
    private db: AngularFireDatabase) {
  }
  profiles=[];
  ionViewDidLoad() {
    console.log('ionViewDidLoad RegisteredusersPage');

  }
  getProfile(){
    console.log(this.db.list('profile-list'));
    var database = firebase.database();
    var ref=database.ref("profile-list");
    ref.on('value', this.gotData, this.errData)

  }
  gotData(data){
      console.log(data.val());
      var profilesArr=data.val();
      var keys=Object.keys(profilesArr);
      var that=this;
      var array=[];
      console.log("Pre keys");
      console.log("keys:"+keys);
      console.log("profilesArr: "+profilesArr);
      for(var i = 0; i <keys.length; i++){
          var k = keys[i];
          var profileName = profilesArr[k].name;
          var profileCountry = profilesArr[k].country;
          console.log(profileName,profileCountry);
          alert(profileName);
          alert(profileCountry);
          array[i]=profilesArr[k];
          this.profiles[i]=profilesArr[k];

      }
      console.log(this.profiles);

  }
  errData(err){
    console.log("Error");
    console.log(err);
  }

I know it's a pretty newbie question, but I can't get my head around it. I would be really grateful if you could help me solve it, thanks!

Milica Jevtic
  • 25
  • 5
  • Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – Matt McCutchen Aug 15 '18 at 15:43
  • 1
    You mention other answers, but don't say why they don't apply. In order to help people not just give you those other answers, maybe tell us why those solutions don't fit? –  Aug 15 '18 at 15:48
  • Thanks for the answers! About the answers, I've read them but I didn't really figure 'this' out. It is difficult for me, I come from Java, and it seems that it is very different. I've read that @MattMcCutchen, but I'm still not sure what should I change in my code to make this work. Sorry for the hassle, but I can't get this right. – Milica Jevtic Aug 15 '18 at 20:04
  • Yes, `this` in JavaScript is a pain. I added some code examples; hopefully I got at least one of them right. – Matt McCutchen Aug 15 '18 at 20:10

1 Answers1

0

Replace:

ref.on('value', this.gotData, this.errData)

with:

ref.on('value', this.gotData.bind(this), this.errData.bind(this))

or:

ref.on('value', (data) => this.gotData(data), (err) => this.errData(err))

Alternatively, change the definitions:

gotData(data){ ... }
errData(err){ ... }

to:

gotData = (data) => { ... }
errData = (err) => { ... }
Matt McCutchen
  • 28,856
  • 2
  • 68
  • 75
  • Used the ref.on('value', this.gotData.bind(this), this.errData.bind(this)) version and it is actually working! Thank you very much! After reading the other thread you sent me, and now seeing how it should be done I feel I understand the "this" concept much clearer now. Thank you VERY much, been banging my head on this whole day. Very appreciated! – Milica Jevtic Aug 15 '18 at 20:19