在Angular App中对网络请求之前的空对象使用条件检查

Question

I have a function that takes in filter values and the passes a network request in my Angular app. Because I'm running into issues where the network request is made before the filters arrive, I've tried setting up some conditional checks to not make the network request until the filter values are available. It's not the ideal solution, but I'm trying to get something working (for now) on short notice.

This is my code. First, I set up a function to check if an object is empty or not. I do this because I want to only fire my network request once I have a non-empty object. And the object will be non-empty once the filter values have been applied. Here's the code:

isEmptyObj(obj) {
    return Object.keys(obj).length === 0;
}

public async onFilterReceived(values) {
    let filters = {};

    if (!values) return;

    if (values) {
        filters = values;
    }

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
        }
    );

    let fn = resRecordsData => {
        this.records = resRecordsData;
    };

    // Make request IF filters is NOT empty object (i.e. it has values)
    if (!this.isEmptyObj(filters)) {
        console.log('filter values within cond call: ', filters); // should not be empty
        console.log('firstName within cond call: ', filters['firstName']); // should not be empty in this case as I selected a firstName value
        console.log('should be false: ', this.isEmptyObj(filters)); // should be false
        this.streamFiltersService.getByFilters(
            this.page - 1, this.pagesize, this.currentStage, this.language = filters['language'], this.location = filters['location'],
            this.zipcode = filters['zip'], this.firstName = filters['firstName'], this.lastName = filters['lastName'],
            this.branch = filters['branch'], fn);
    }
}

Clearly this is not working as intended. When I look at what logs to the console from WITHIN the conditional section, I see 'filters' and 'firstName' as empty values. In other words, my conditional check is not working as I intended it to. What am I missing here? How could I approach this differently so that the network request is only made once I have the values?

By the way, when I console.log values , this is what I get:

{zip: Array(0), firstName: Array(0), lastName: Array(0), language: Array(0), location: Array(0), …}

By the way, earlier console logs I used demonstrate that initially filters is an empty object. It's only I assign values to filters that it is no longer an empty object.

So, why then is my conditional check before the network request working as intended?

Within the if conditional I see this console.log:

filter values within cond call:  {zip: Array(0), firstName: Array(0), lastName: Array(0), language: Array(0), location: Array(0), …}

Help me understand how this is happening based on my above code.

Answer 1

The first issue is that the method isEmptyObj(obj) to check for keys isn't working as you are expecting. This is because the sample values you provided:

{zip: Array(0), firstName: Array(0), lastName: Array(0), language: Array(0), location: Array(0), …}

Even though it is only empty arrays, that still has keys, so that method isEmptyObj will return false for that sample value. The only time it would return false would be for a plain empty object {} .

 function isEmptyObj(obj) { return Object.keys(obj).length === 0; } console.log(isEmptyObj({})); console.log(isEmptyObj({ zips: [] })); 

So change that to something like where you filter "falsy" values based on length :

 function isEmptyObj(obj) { return Object.keys(obj).map(key => obj[key]).filter(v => v.length > 0).length === 0; } console.log(isEmptyObj({ })); console.log(isEmptyObj({ zip: [] })); 

The next issue is the flow of onFilterReceived . It does not need to be an async , method, also this.route.params.subscribe() will effectively always execute after the rest of the code in the method. Try the following by moving everything into subscribe() at the very minimum. Keep in mind you need to subscribe() to an HTTP calls to actually get them to execute:

public onFilterReceived(values) {
    let filters = {};

    if (!values) return;

    if (values) {
        filters = values;
    }

    this.route.params.subscribe((params: any) => {
        this.page = params['page'];

        let fn = resRecordsData => (this.records = resRecordsData);

        // Make request IF filters is NOT empty (i.e. it has values)
        if (!this.isEmptyObj(filters)) {
          this.streamFiltersService.getByFilters(
            this.page - 1, this.pagesize, this.currentStage, this.language = filters['language'],
            this.location = filters['location'],
            this.zipcode = filters['zip'], this.firstName = filters['firstName'], this.lastName = filters['lastName'],
            this.branch = filters['branch'],
            fn
          )
          .subscribe(results => console.log(results));
        }
      });
   );
}

You can use operators such as switchMap , takeWhile , and tap to streamline the Observable portion:

import { switchMap, takeWhile, tap } from 'rxjs/operators';

// ..

public onFilterReceived(values) {
    let filters = {};

    if (!values) return;

    if (values) {
        filters = values;
    }

    this.route.params.pipe(
        tap((params: any) => this.page = params['page']),
        takeWhile(_ => !this.isEmptyObj(filters)),
        switchMap((params: any) => {
            let fn = resRecordsData => (this.records = resRecordsData);

            return this.streamFiltersService.getByFilters(
                this.page - 1, this.pagesize, this.currentStage, this.language = filters['language'],
                this.location = filters['location'],
                this.zipcode = filters['zip'], this.firstName = filters['firstName'], this.lastName = filters['lastName'],
                this.branch = filters['branch'],
                fn
            );
        });
    ).subscribe(results => console.log(results));
}

Hopefully that helps!