Utilize TypeScript to generate an array from an Enum and subsequently employ it as a parameter in a service invocation

Question

Utilize TypeScript to generate an array from an Enum and subsequently employ it as a parameter in a service invocation

I am working on an Angular component that utilizes a simple service to retrieve data based on an Enum parameter.

export enum AgeEnum {
    UNDER_18 = 'UNDER_18',
    ABOVE_18 = 'ABOVE_18'
}

Within my component, I have the following setup:

private ageArray = Object.keys(AgeEnum);

private restrictionsWrapper: RestrictionsWrapper;

constructor(private restrictionsService: RestrictionsService) {
}

ngOnInit(): void {
    this.getRestrictionsForAge(this.ageArray);
}

private getRestrictionsForAge(ages: string[]) {
    for (const age of ages) {
        this.restrictionsService.getRestrictions(age as AgeEnum)
            .subscribe((options) => {
                    this.restrictionsWrapper.restrictions = options.restrictions;
                }, () => {
                    this.restrictionsWrapper.restrictions = null;
                }
            );
    }
}

The UI Service method is defined as follows:

getRestrictions(age: AgeEnum): Observable<RestrictionsWrapper> {
    const params = new HttpParams().set('age', age);
    return this.http.get<RestrictionsWrapper>(BackendRoute.RESTRICTIONS, {params: params});
}

This is the model for RestrictionsWrapper:

export interface RestrictionsWrapper {
    restrictionDocuments: string[];
    blocked: boolean;
}

The goal is to load different sets of restrictions based on the age, without duplicating methods. However, there seems to be an error:

Unhandled error occured. TypeError: Cannot set property 'restrictions' of undefined

Any suggestions on what might be incorrect or if using

this.restrictionsService.getRestrictions(age as AgeEnum)

is the best approach?

angular typescript service enums

Answer 1

Answer №1

It seems like the issue lies in your RestrictionsWrapper being an interface. An interface is meant to describe values and functions that classes must implement, but it is not an object itself.

The error message

TypeError: Cannot set property 'restrictions' of undefined

indicates that you are trying to assign a value to a property of an undefined variable, like this: undefined.restrictions = VALUE.

To resolve this problem, you have two options:

First:

// Initialize your variable with an empty object
private restrictionsWrapper: RestrictionsWrapper = {};

Second:

In your component:

private restrictionsWrapper: RestrictionsWrapperClass;

constructor(private restrictionsService: RestrictionsService) {
    this.restrictionsWrapper = new RestrictionsWrapperClass();
}

In your restriction.api.ts:

export class RestrictionsWrapperClass implements RestrictionsWrapper {

    restrictionDocuments: string[];
    blocked: boolean;

    constructor() {
        // Set default values if needed
        this.restrictionDocuments = [];
        this.blocked = false;
    }

}

Answer 2

It seems like the issue lies in your RestrictionsWrapper being an interface. An interface is meant to describe values and functions that classes must implement, but it is not an object itself.

The error message

TypeError: Cannot set property 'restrictions' of undefined

indicates that you are trying to assign a value to a property of an undefined variable, like this: undefined.restrictions = VALUE.

To resolve this problem, you have two options:

First:

// Initialize your variable with an empty object
private restrictionsWrapper: RestrictionsWrapper = {};

Second:

In your component:

private restrictionsWrapper: RestrictionsWrapperClass;

constructor(private restrictionsService: RestrictionsService) {
    this.restrictionsWrapper = new RestrictionsWrapperClass();
}

In your restriction.api.ts:

export class RestrictionsWrapperClass implements RestrictionsWrapper {

    restrictionDocuments: string[];
    blocked: boolean;

    constructor() {
        // Set default values if needed
        this.restrictionDocuments = [];
        this.blocked = false;
    }

}

Answer 3

Answer №2

insert

Create a new instance of RestrictionsWrapper inside the constructor or ngOnInit() of the controller, or within the getRestrictionsForAge() method.

The issue arises from attempting to set properties of restrictionsWrapper before it has been instantiated.

Answer 4

insert

Create a new instance of RestrictionsWrapper inside the constructor or ngOnInit() of the controller, or within the getRestrictionsForAge() method.

The issue arises from attempting to set properties of restrictionsWrapper before it has been instantiated.

Utilize TypeScript to generate an array from an Enum and subsequently employ it as a parameter in a service invocation

Answer №1

Answer №2

Similar questions

strategies for sharing data in Angular 2

Ensure that enums in Typescript are initialized explicitly

Why am I restricted to adjusting mat-elevation settings within the component's CSS exclusively?

The absence of the google-services.json file has rendered the Google Services Plugin inoperable. Attempted search location:

Using a for-loop in Typescript to iterate over objects in an array

Received an error while using Mongoose 6 $group with Typescript stating that the property '_id' is not compatible with the index signature

A guide to implementing Typescript Generics in modifier functions

What are the drawbacks of starting with Angular CLI?

Tips for associating an identifier with a preexisting symbol in a TypeScript compiler transformer

Errors detected while attempting to install dependencies using pnpm: modules unspecified

Creating a standard arrow function in React using TypeScript: A Step-by-Step Guide

Developing an Angular directive that accepts a function parameter using TypeScript

The functionality of GetStaticProps with Typescript is only operational when defined as an arrow function, rather than a function

Tips for changing a created Word file with Docxtemplater into a PDF format

Utilizing Class Validator in NestJS: A Guide to Injecting Services into Validator Constraint Interfaces

What could be causing the Angular error related to this HttpHeader?

Prevent a TypeScript generic object from containing a specific property

Is there a way to incorporate npm install --force into the process when running ionic build android?

"Discovering the secrets of incorporating a spinner into Angular2 and mastering the art of concealing spinners in Angular

Angular: Updating image tag to display asynchronous data