angular: by default not send undefined params in url

Since I use optional parameters quite a bit, I decided to write my own helper function which I have listed below in case it proves useful to others.

In a file named http-params.ts:

import { HttpParams } from '@angular/common/http';

export function createHttpParams(params: {}): HttpParams {
    let httpParams: HttpParams = new HttpParams();
    Object.keys(params).forEach(param => {
        if (params[param]) {
            httpParams = httpParams.set(param, params[param]);
        }
    });

    return httpParams;
}

Then, when I need to create some HTTP parameters, I use it as follows:

import { HttpParams } from '@angular/common/http';
import { createHttpParams } from '../lib/http-params';
...
@Injectable()
export class MyApiService {
  someApiMethod(param1: string, param2?: string, param3?: string): Observable<Member[] | {}> {
    const params: HttpParams = createHttpParams({ param1: param1, param2: param2, param3: param3 });
    ...
  }
...
}

For future readers, this can also be handled generically as an HTTP Interceptor:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

/**
 * Strip out any `undefined` parameters in the query string.
 */
@Injectable()
export class StripUndefinedParams implements HttpInterceptor {

    /**
     * Iterate through query parameters and remove all those that are `undefined`.
     *
     * @param request The incoming request.
     * @param next The next handler.
     * @returns The handled request.
     */
    public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let params = request.params;
        for (const key of request.params.keys()) {
            if (params.get(key) === undefined) {
                params = params.delete(key, undefined);
            }
        }
        request = request.clone({ params });
        return next.handle(request);
    }
}

Duplicate of #18567

This definitely should be the default behavior.

FWIW- I don’t think it should be the framework’s responsibility to protect us from passing invalid values. If I pass an undefined by accident, I would much rather it show up in the URL so I know exactly what I’m doing wrong. If these values disappear ‘magically’, and I’m actually expecting them, I face a much harder task tracing the origin.

I would at least expect a property inside HttpParamsOptions.

For example: new HttpParams({ fromObject: { a, b }, stripUndefined: true }) }

Default behaviour might be that it does not strip undefined.

An interceptor works, but shouldn’t be needed for something this simple 😃

We too seek that functionality (and believe it should come out of the box)

My solution is to add a new util method to remove “empty” object properties. And it can be used not only for http params.

/**
 * Removes empty properties from an object
 *
 * @param object is any object
 * @returns a clone of the given object with no empty (`undefined` or `null`) properties
 **/
static removeEmptyProperties(object) {
  return _.pick(object, value => value !== null && value !== undefined);
}

We use the lodash library in our project. Here I used the _.pick() method to make it more clear.

That’s how I can use it:

find$(searchItem): Observable<any> {
  const url = `${this.URL_BASE}/find/`;
  const params = AppUtil.removeEmptyProperties(searchItem);

  return this.http.get<any>(url, {params});
}

The interceptor workaround appears to no longer work, since any undefined value is now stored as an actual string value "undefined" making the comparison fail.

const params = new HttpParams({fromObject: {a: undefined, b: null}});

console.log(params.get("a"), params.get("a") === undefined); // shows the string "undefined" and comparison fails
console.log(params.get("b"), params.get("b") === null); // shows the string "null" and comparison fails

That is, the value has been already changed to a string before the HttpInterceptor has a chance to see the actual initial value to remove any undefined or null values.

The change was possibly introduced with this commit https://github.com/angular/angular/blame/ec8b52af69a2e04a7b077eb4d4309870ba40e273/packages/common/http/src/params.ts#L168 , which will ensure all values stored with HttpParams are strings.