Angular2 Accessing first element in Observable of array

Question

EDIT: I finally got my problem going in a plunk at https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj. If you hit the select market then press enter it will enter the marketSelectorDropDown method in the market-search.component.ts file. The problem is in the few lines below the map and subscribe never execute until the select market dropdown is clicked again. I do not understand why. Any help is greatly appreciated!

this.markets
        .map(markets => {
            debugger
            if(markets && markets.length > 0) return markets[0];
        })
        .subscribe((market: Market) => {
            debugger
            this.pick(market.name)
        });

EDIT: In the comments of the one marked as the answer is the answer. It is to use a BehaviorSubject. This allows late subscribers to get the last event sent.

score 3 · Accepted Answer · edited May 23 '17 at 12:09

3

According to RxJS5 documentation

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first

First operator

If called with no arguments, first emits the first value of the source Observable, then completes. If called with a predicate function, first emits the first value of the source that matches the specified condition. It may also take a resultSelector function to produce the output value from the input value, and a defaultValue to emit in case the source completes before it is able to emit a valid value. Throws an error if defaultValue was not provided and a matching element is not found.

It usefull if you deal with Observable from event

For example, emit only the first click that happens on the DOM (like .one in jQuery)

var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.first();
result.subscribe(x => console.log(x));

Or you can look at other use case in this answer Angular 2 runOutsideAngular still change the UI

So it isn't exactly that what you want, but you can use it like this:

.first(null, arr => arr[0]).subscribe...

and it should return desired first element of array Plunker Example(first)

But i would leverage map operator to do the same:

.map(arr => arr[0]).subscribe...

Plunker Example(map)

edited May 23 '17 at 12:09

Community

1
1

answered Dec 01 '16 at 20:07

yurzui

205,937
32
433
399

When I try: ` this.markets .first(null, markets => markets[0]) .subscribe((market: Market) => { this.pick(market.name) }); ` and set a breakpoint in the subscribe method it is never hit. – avidgoffer Dec 01 '16 at 20:18
Angular2 uses rxjs5. I added plunker. There is dummy json and it always returns `name1` – yurzui Dec 01 '16 at 20:40
I really appreciate your example and I see how it works now, but when I take your code and apply it to mine it doesn't work. I don't understand why. Do you have any thoughts? I've included the entire ts file this time in my question. – avidgoffer Dec 02 '16 at 13:34
I got my problem in a [plunk](https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj?p=preview) The problem is as I have restated above the map and subscribe never fire until a new searchTerm is added to the subject. – avidgoffer Dec 05 '16 at 12:39
Observables are lazy. Try to subscribe before emitting event https://plnkr.co/edit/4Oo5WZzjL6b7O8SV6IFj?p=preview – yurzui Dec 05 '16 at 12:49
In your plunk the subscrbe never fires. I want to be able to retrieve the first item in that drop down list when the user presses enter. The list could filtered by text entered into the box. – avidgoffer Dec 05 '16 at 13:44
It fires but in your case maybe you're looking for BehaviorSubject https://plnkr.co/edit/WEMAkwvUHtpKnO38CWpJ?p=preview See also http://stackoverflow.com/questions/28311118/how-to-get-the-current-value-of-an-observer-at-subscribe-time – yurzui Dec 05 '16 at 14:06
the BehaviorSubject is exactly what I was looking for. Thank you! – avidgoffer Dec 05 '16 at 18:41

Ankit Rathore · Answer 2 · 2019-03-07T05:03:24.970

3

I was able to access the Observable's first member by using angular's async pipe.

yourComponent.html (yourObservable | async | slice :0:1)

edited Mar 07 '19 at 05:03

answered Mar 06 '19 at 12:49

Ankit Rathore

101
1
2

score 0 · Answer 3 · answered Dec 01 '16 at 21:41

0

Your example doesn't work because you are using CDN for RxJS 2, You need RxJS 5 for this. I tried to replace the CDN to version 5 and it was working just fine.

answered Dec 01 '16 at 21:41

Avi

1,924
3
17
31

Thank you for your help. I realize not I was using wrong version in example, but I am still unable to get it to work in my real world situation. – avidgoffer Dec 02 '16 at 13:38
In your Markup, try to use: (keydown.enter), no capital letters. – Avi Dec 03 '16 at 19:17
the casing of the event is not the problem. the event fires as you can in this [plunk](https://plnkr.co/edit/A2WipJwW9kEhhlh90xMj?p=preview). The problem is as I have restated above the map and subscribe never fire until a new searchTerm is added to the subject. – avidgoffer Dec 05 '16 at 12:37

Angular2 Accessing first element in Observable of array

3 Answers3