Observable: filter() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The filter() method of the Observable interface returns a new observable that emits only those values of the source observable for which the provided callback function returns a truthy value.
Syntax
filter(predicate)
Parameters
Return value
A new Observable. When subscribed to, it calls predicate for each value emitted by the source observable and emits the value only if predicate returns a truthy value. When the source completes, the returned observable also completes.
Description
Like other observable-returning operators, this method is lazy: calling it creates a new observable without subscribing to the source. Processing starts when the returned observable is subscribed to.
If predicate throws an exception, the returned observable errors and unsubscribes from the source. Errors from the source are also forwarded.
The index counts all source values, including those that are filtered out. The return value of predicate is converted to a boolean without awaiting it, so an async function returns a truthy promise object regardless of its eventual result.
Examples
Using filter()
This example displays the mouse coordinates only when the pointer moves over either of two <div> elements. The filter excludes events whose target is another element.
const outputElem = document.querySelector("p");
document.body
.when("mousemove")
.filter((e) => e.target.matches("div"))
.map((e) => ({ x: e.clientX, y: e.clientY }))
.subscribe({ next: reportCoords });
function reportCoords(e) {
outputElem.textContent = `${e.x},${e.y}`;
}
Specifications
| Specification |
|---|
| Observable # dom-observable-filter |