TypeScript create array from Enum and then use it as parameter for a service call

Question

I have an angular component with a simple service that extracts some data based on a parameter which happens to be an Enum.

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

Then in my component I have the following:

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;
                }
            );
    }
}

My UI Service looks like this:

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

And this is my RestrictionsWrapper model:

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

So basically, based on the age, i want to load a different set of 'restrictions'. But I don't want to have two separate methods where I pass two different ENUM values for each. I am getting an error:

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

Any idea what I am doing wrong? Is this actually correct (or good practice) this.restrictionsService.getRestrictions(age as AgeEnum) ?

Do you instantiate your restrictionsWrapper somewhere? Because it looks like you're not doing this and that would be the cause for your error message. — Batajus
– Batajus, Commented Aug 20, 2018 at 16:41
@Batajus, I added my model to the description too. My RestrictionsWrapper is actually an interface. — lapadets
– lapadets, Commented Aug 21, 2018 at 7:20

Batajus · Accepted Answer · 2018-08-21 16:10:44Z

That's your problem your RestrictionsWrapper is an interface. An interface only describes values and functions, which classes need to implement, but it's not an object.

Your error message TypeError: Cannot set property 'restrictions' of undefined tries to tell you that you are trying to do something like this: undefined.restrictions = VALUE.

To solve your problem you can choose between following two options:

First:

// Initialise 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 e.g. restriction.api.ts.

export class RestrictionsWrapperClass implements RestrictionsWrapper {

    restrictionDocuments: string[];
    blocked: boolean;

    constructor() {
        // Don't know, set some default values if you want
        this.restrictionDocuments = [];
        this.blocked = false;
    }

}

Ranjith Eswaran · Accepted Answer · 2018-08-20 16:49:00Z

1

add

restrictionsWrapper = new RestrictionsWrapper();

inside the constructor or ngOnInit() of the controller or inside the getRestrictionsForAge() method.

The error occured because you are trying to initialize the properties of restrictionsWrapper before instantiating it

answered Aug 20, 2018 at 16:49

Ranjith Eswaran

3332 silver badges12 bronze badges

2 Comments

lapadets Over a year ago

But my RestrictionsWrapper is an interface.

Ranjith Eswaran Over a year ago

you can create a class that implements RestrictionsWrapper class which can be further instantiated @lapadets

Collectives™ on Stack Overflow

TypeScript create array from Enum and then use it as parameter for a service call

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related