Observable: map() 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 map() method of the Observable interface returns a new observable that emits the values of the source observable, each transformed by a mapping function.
Syntax
map(mapper)
Parameters
Return value
A new Observable. When subscribed to, it calls mapper for each value emitted by the source observable and emits the return 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 mapper throws an exception, the returned observable errors and unsubscribes from the source. Errors from the source are also forwarded.
The return value of mapper is emitted as-is. In particular, a returned promise is emitted as a promise object; it is not awaited. To emit values from a returned promise or another observable, use flatMap() or switchMap().
Examples
Using map()
This example displays the mouse coordinates when the pointer moves over either of two <div> elements. The mapping function extracts the coordinates from each mouse event into an object with x and y properties.
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-map |