why class variable throws undefined in javascript?

Question

I have a class, constructor and some functions, like below. in my getData function, I see this.data is populated once the api call is made, but when it gets to the showData function this.data is undefined. what am i missing here?

(function(){
  class foo{
   constructor (){
     this.data=[]; 
     this.btn = document.getElementById("btn")
     this.btn.addEventlistener('click', this.showData);
     this.getData(); 
   }
   getData(){
       $.ajax({
         url : 'someapi',
         type:'get',
         datatype : 'application/json',
         success : (results) => {
             this.data = results;
         }
       ); 
   }
   showData(){
      $.each(this.data, (item) => {
         console.log(item); 
      });
   }
  }
  new foo(); 
})();