Unable to retrieve property within a function in Typescript

Question

Unable to retrieve property within a function in Typescript

export class DuyurularPage {
    duyurular: any;
    loading: any;

    constructor(public navCtrl: NavController, public navParams: NavParams, public loadingPage: LoadingController,
        platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

        this.loading = this.loadingPage.create({
            content: `
            <ion-spinner></ion-spinner>`
        });

        platform.ready().then(() => {
            statusBar.styleDefault();
            splashScreen.hide();

           // Retrieve notification data and assign it to the 'duyurular' variable  
           var notificationOpenedCallback = function (jsonData) {
                this.duyurular = jsonData.notification.payload;
            };

            alert
            window["plugins"].OneSignal
            .startInit("12312412412412", "1231241212")
            .handleNotificationOpened(notificationOpenedCallback)
            .endInit();
        });
    }
}

var notificationOpenedCallback = function...

← Within this function, accessing this.duyurular is not possible.

I need to populate the array (duyurular) with data from a JSON source. How should I proceed?

javascript json typescript

Answer 1

Answer №1

The reason for the issue is due to the incorrect scope of the function below.

    var notificationOpenedCallback = function(jsonData) {
      this.duyurular = jsonData.notification.payload;
    };

To solve this, you can either change it to a fat arrow function or define the scope outside of this block:

Recommended approach:

    var notificationOpenedCallback = (jsonData) =>  {
      this.duyurular = jsonData.notification.payload;
    };

Alternative approach using an external scope:

    const self = this;

    var notificationOpenedCallback = function(jsonData) {
      self.duyurular = jsonData.notification.payload;
    };

When constructing the array, the data will be in the form of a JSON object. Extract the necessary data from the JSON and utilize it to build the array for your component. For further guidance on this, refer to the following question: How to convert JSON object to JavaScript array

Answer 2

The reason for the issue is due to the incorrect scope of the function below.

    var notificationOpenedCallback = function(jsonData) {
      this.duyurular = jsonData.notification.payload;
    };

To solve this, you can either change it to a fat arrow function or define the scope outside of this block:

Recommended approach:

    var notificationOpenedCallback = (jsonData) =>  {
      this.duyurular = jsonData.notification.payload;
    };

Alternative approach using an external scope:

    const self = this;

    var notificationOpenedCallback = function(jsonData) {
      self.duyurular = jsonData.notification.payload;
    };

When constructing the array, the data will be in the form of a JSON object. Extract the necessary data from the JSON and utilize it to build the array for your component. For further guidance on this, refer to the following question: How to convert JSON object to JavaScript array

Unable to retrieve property within a function in Typescript

Answer №1

Similar questions

Error: The value of _This.props is not defined

Replacing the yellow autofill background

Label positioning for checkboxes

Sorting JavaScript Objects By Date

bootstrap thumbnail displayed without a border

How to sort an array of multiple objects in AngularJS based on a specific property

The attempt to execute 'removeChild' on 'Node' was unsuccessful due to an uncaught DOMException

Using gulp to compile TypeScript is resulting in a directory being generated that we do not want

Can you propose a different approach to creating the "word stack" that overcomes the limitations of my current method?

Error message 'Access is Denied' occurs when using Angular.js xhr.open()

Step-by-step guide on parsing JSON data on a Windows phone device

Ways to customize pixel scrolling on page reload or through the use of a hyperlink to a specific tab in a page

Adjust the div's height to 0

Can one utilize Javascript/Angular to listen for a 'request sent' event trigger?

Challenges in retrieving information from a two-dimensional JSON dataset

Dynamically insert a new row into an HTML table using AJAX and refresh the table with .load method

Separating an Array Subset in JavaScript/jQuery

The call to the hook is invalid. In order to use hooks, they must be called within the body of a function component in

Tips for troubleshooting common network errors in Volley

Creating a video game HUD effect using JavaScript and HTML5