Error: Attempting to access the 'subscribe' property of an undefined value (Observable)

Question

Error: Attempting to access the 'subscribe' property of an undefined value (Observable)

In my TypeScript/Angular2/SPFx project, I have the following code snippet:

// Populate the regulatory documents dropdown
this.regulatoryDocumentsService.fetchRegulatoryDocumentsData().subscribe(
    data => { this.regulatoryDocumentsData = data },
    err => { window.console && console.log(err) }
);

Explaining further:

public fetchRegulatoryDocumentsData(): Observable<RegulatoryDocument[]> {
    var choicesArray: Array<RegulatoryDocument> = new Array<RegulatoryDocument>();

    // Handling local environment
    if (Environment.type === EnvironmentType.Local)
    {
        // Providing dummy data for the form - it works
        window.console && console.log("fetchRegulatoryDocumentsData(): Local workbench in use");
        choicesArray.push(new RegulatoryDocument(1,"Document 1"));
        choicesArray.push(new RegulatoryDocument(2, "Document 2"));
        choicesArray.push(new RegulatoryDocument(3, "Document 3"));
        return Observable.of<RegulatoryDocument[]>(choicesArray);
    }
    else if (Environment.type == EnvironmentType.SharePoint || 
          Environment.type == EnvironmentType.ClassicSharePoint)
    {
        // Issue arises here when subscribing to fetchRegulatoryDoocumentsData() due to undefined
        pnp.sp.web.lists.getByTitle('Regulatory Documents').items.get().then((choices: any[]) => {
            window.console && console.log("choices ...");
            window.console && console.log(choices);

            if (choices) {
                [].slice.call(choices).forEach(choice => {
                   choicesArray.push(new RegulatoryDocument(choice.ID, choice.Title));
                });
            }
            return Observable.of<RegulatoryDocument[]>(choicesArray);
        });
    }
}

However, encountering an issue when

Environment.type != EnvironmentType.Local

, as a subscription error occurs mentioning inability to subscribe to undefined. The suspicion falls on the nested PNP promise structure. Any suggestions or insights would be highly appreciated.

angular typescript

Answer 1

Answer №1

When you use lists.getByTitle('Regulatory Documents').items.get().then(...);

in your code, it will give you a promise containing an observable.

However, if (Environment.type == EnvironmentType.SharePoint || 
          Environment.type == EnvironmentType.ClassicSharePoint)
    {
        // The function fetchRegulatoryDoocumentsData() is undefined when I attempt to subscribe to it.
    return Observable.create( (observer: any) => {
        pnp.sp.web.lists.getByTitle('Regulatory Documents').items.get().then((choices: any[]) => {



            window.console && console.log("choices ...");
            window.console && console.log(choices);

            if (choices) {
                //choices.forEach((choice) => {
                //    choices.push(new Rating(choice));
                //});
                //Array.from(choices).forEach(function (child) {
                //    window.console && console.log(child)
                //});

                [].slice.call(choices).forEach(choice => {
                   choicesArray.push(new RegulatoryDocument(choice.ID, choice.Title));
                });
            }
            observer.next(choicesArray);
        });
    });
  }
}

You can also choose to utilize promises throughout your code:

this.regulatoryDocumentsService.fetchRegulatoryDocumentsData().then(
    data => { this.regulatoryDocumentsData = data },
    err => { window.console && console.log(err) }
);

service

public fetchRegulatoryDocumentsData(): Observable<RegulatoryDocument[]> {
    var choicesArray: Array<RegulatoryDocument> = new Array<RegulatoryDocument>();

    // Local environment
    if (Environment.type === EnvironmentType.Local)
    {
        // Send dummy data to the form - this works
        window.console && console.log("fetchRegulatoryDocumentsData(): Local workbench in use");
        choicesArray.push(new RegulatoryDocument(1,"Document 1"));
        choicesArray.push(new RegulatoryDocument(2, "Document 2"));
        choicesArray.push(new RegulatoryDocument(3, "Document 3"));
        return Promise<RegulatoryDocument[]>.resolve(choicesArray);
    }
    else if (Environment.type == EnvironmentType.SharePoint || 
          Environment.type == EnvironmentType.ClassicSharePoint)
    {
        // The function fetchRegulatoryDoocumentsData() is undefined when I try to subscribe to it.
        pnp.sp.web.lists.getByTitle('Regulatory Documents').items.get().then((choices: any[]) => {
            window.console && console.log("choices ...");
            window.console && console.log(choices);

            if (choices) {
                //choices.forEach((choice) => {
                //    choices.push(new Rating(choice));
                //});
                //Array.from(choices).forEach(function (child) {
                //    window.console && console.log(child)
                //});

                [].slice.call(choices).forEach(choice => {
                   choicesArray.push(new RegulatoryDocument(choice.ID, choice.Title));
                });
            }
            return choicesArray;
        });
    }
}

Answer 2

When you use lists.getByTitle('Regulatory Documents').items.get().then(...);

in your code, it will give you a promise containing an observable.

However, if (Environment.type == EnvironmentType.SharePoint || 
          Environment.type == EnvironmentType.ClassicSharePoint)
    {
        // The function fetchRegulatoryDoocumentsData() is undefined when I attempt to subscribe to it.
    return Observable.create( (observer: any) => {
        pnp.sp.web.lists.getByTitle('Regulatory Documents').items.get().then((choices: any[]) => {



            window.console && console.log("choices ...");
            window.console && console.log(choices);

            if (choices) {
                //choices.forEach((choice) => {
                //    choices.push(new Rating(choice));
                //});
                //Array.from(choices).forEach(function (child) {
                //    window.console && console.log(child)
                //});

                [].slice.call(choices).forEach(choice => {
                   choicesArray.push(new RegulatoryDocument(choice.ID, choice.Title));
                });
            }
            observer.next(choicesArray);
        });
    });
  }
}

You can also choose to utilize promises throughout your code:

this.regulatoryDocumentsService.fetchRegulatoryDocumentsData().then(
    data => { this.regulatoryDocumentsData = data },
    err => { window.console && console.log(err) }
);

service

public fetchRegulatoryDocumentsData(): Observable<RegulatoryDocument[]> {
    var choicesArray: Array<RegulatoryDocument> = new Array<RegulatoryDocument>();

    // Local environment
    if (Environment.type === EnvironmentType.Local)
    {
        // Send dummy data to the form - this works
        window.console && console.log("fetchRegulatoryDocumentsData(): Local workbench in use");
        choicesArray.push(new RegulatoryDocument(1,"Document 1"));
        choicesArray.push(new RegulatoryDocument(2, "Document 2"));
        choicesArray.push(new RegulatoryDocument(3, "Document 3"));
        return Promise<RegulatoryDocument[]>.resolve(choicesArray);
    }
    else if (Environment.type == EnvironmentType.SharePoint || 
          Environment.type == EnvironmentType.ClassicSharePoint)
    {
        // The function fetchRegulatoryDoocumentsData() is undefined when I try to subscribe to it.
        pnp.sp.web.lists.getByTitle('Regulatory Documents').items.get().then((choices: any[]) => {
            window.console && console.log("choices ...");
            window.console && console.log(choices);

            if (choices) {
                //choices.forEach((choice) => {
                //    choices.push(new Rating(choice));
                //});
                //Array.from(choices).forEach(function (child) {
                //    window.console && console.log(child)
                //});

                [].slice.call(choices).forEach(choice => {
                   choicesArray.push(new RegulatoryDocument(choice.ID, choice.Title));
                });
            }
            return choicesArray;
        });
    }
}

Error: Attempting to access the 'subscribe' property of an undefined value (Observable)

Answer №1

Similar questions

How to create an array of objects in Angular 2

Using TypeScript for Immutable.js Record.set Type Validation

Utilize FastClick for improved speed and response on

Tips for customizing Material UI's styled() SVG icon to accept SVG icon as a react component:

Save this code snippet to your clipboard using vanilla JavaScript (no jQuery needed)

Ways to verify the existence and non-empty status of a directory?

Limit the implementation of Angular Material's MomentDateAdapter to strictly within the confines of individual

Encountering a 404 error when trying to load a script from a local folder into a component

Saving information obtained through Angular subscribe into a variable

Using `publishReplay()` and `refCount()` in Angular does not behave as anticipated when dealing with subscriptions across multiple components

The error message "Ionic 3 encountering issues with accessing property 'valid' from undefined or null reference"

Which specific files do I have to edit in order for Laravel to acknowledge a new data type?

The Angular/Express application is in search of outdated JavaScript files within the Chrome browser

Creating an object key using a passed literal argument in TypeScript

Creating and updating a TypeScript definition file for my React component library built with TypeScript

Angular 2 forms are displaying ngvalid when input fields are marked as nginvalid

Uncertainty surrounding dynamic bootstrapping in @NgModules

Utilize the imported function from <Script> within NextJS

The BehaviorSubject will consistently emit identical values to each subscription

Navigate to the logout page upon encountering an error during the request