Logic Not Working After Moving to Service Layer in Angular 2 App

Question

I have some functionality in my Angular 2 app that I'd like to move to a service layer, because currently several components use the exact same functionality (and thus code is repeated). Thus far, however, I'm having trouble getting the functionality to work when I move it to the service layer. It does work as is when called directly from the component layer.

First, here's the functionality in my component. Basically I'm taking in some filter choices made by the user, and then filtering my observable call based on these filter selections:

body: any = {'group': 'consulting'};

private processType(name: string, value: any, body: any)
    {
        if (this.body[name] && !value) {
                delete this.body[name];
            } else {
                this.body[name] = { $in: value };
            }
    }

    private onFilterReceived(value: any, type: string, body)
    {
        if (type === 'lan')
        {
            this.processType('languages.primary', value, body);
        } if (type === 'zip')
        {
            this.processType('addresses.zipCode', value, body);
        } 

        this.filtersService.getByFilter(this.page, this.pagesize, this.body, this.sort)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.data = resRecordsData.data;
            if (this.filter === undefined)
            {
                this.data = resRecordsData.data;
            } else
            this.data.sort(this.filter);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
    }

All of the above works as expected.

However, as mentioned, I'd like to move the initial part of this logic to the service layer, and then just pass the result of that into the subscription in the component. So what I have tried (that's not working currently) is this:

In the service layer I have this:

public processType(name: string, value: any, body: any)
{
    if (this.body[name] && !value) {
            return delete this.body[name];
        } else {
            return this.body[name] = { $in: value };
        }
}

public getFilterInput(value, type, body)
{
    if (type === 'lan')
    {
        return this.processType('languages.primary', value, body);
    } if (type === 'zip')
    {
        return this.processType('addresses.zipCode', value, body);
    } 

}

Notice I'm returning values here, because from my understanding this is something I need to do when abstracting out to the service layer.

So then in the component I've refactored to this:

body: any = {'group': 'consulting'};

private processType(name, value, body)
{
    this.filtersService.processType(name, value, body);
}

private onFilterReceived(value: any, type: string, sort?)
{
    this.filtersService.getFilterInput(type, value);

    this.filtersService.getByFilter(this.page, this.pagesize, this.body, this.sort)
    .subscribe(resRecordsData => {
        this.records = resRecordsData;
        this.data = resRecordsData.data;
        if (this.filter === undefined)
        {
            this.data = resRecordsData.data;
        } else
        this.data.sort(this.filter);
    },
    responseRecordsError => this.errorMsg = responseRecordsError);
}

And at present I then get this error in the console:

inline template:2:8 caused by: Cannot read property 'languages.primary' of undefined

What am I missing here? How do I need to handle this differently when moving this logic to the service layer?

EDIT: Made edits to my code (reflected above) to pass in "body". Still getting undefined error, however.

Rahul Singh Rahul Singh · Accepted Answer · 2017-08-21T06:05:59

this.body[name] body is unavailable in service that is the reason langauges.primary is undefined you need to pass in the body to the service

UPDATE

public processType(name: string, value: any, body: any)
{
    let body = body;
    if (body[name] && !value) {
            return delete body[name];
        } else {
            return body[name] = { $in: value };
        }
}

And then in the component, this:

private processType(name, value)
{
    let body = {'group': 'consulting'};
    this.filtersService.processType(name, value, body);
}

Logic Not Working After Moving to Service Layer in Angular 2 App

1 Answers