Get single member from an array from an rxJS observable

Question

If I have an array class like this:

export class DashboardComponent {
    people$: Observable<Person[]>;
    selectedPerson$: Observable<Person>;
    constructor(selectedPersonId){
         this.people$ = getSomeObservableArrayOfPeople();//gets the array in an observable from some source

         // How to then selected the selected person from the array this.people???
    }
}

How do I go about taking an Observable<Person[]> and then select the person into an Observable(or just the raw value whichever is the correct thing to do).

Not sure what you're asking. Your code shows Observable<Person> but you're asking about Observable<Person[]>. Are you trying to convert one to another? — user3794166
– user3794166, Commented Jun 5, 2016 at 6:05

Günter Zöchbauer · Accepted Answer · 2016-06-05 10:00:32Z

3

Your question is a bit unclear therefore a somewhat generic answer:

When you subscribe to an observable that emits arrays then there is nothing different whether you get that array from an observable or not (at least after you actually got it).

To get the first person subscribe to the observable and just access the first element of the array like

getSomeObservableArrayOfPeople().subscribe(data => this.person = data[0]);

If the observable doesn't emit an array of people but a sequence of events of people then you can use operators like

getSomeObservableOfPeople().skip(3).take(1).subscribe(data => this.person = person);

This only takes the 4th person and ignores all others.

Hint: operators like skip and take need to be imported explicitly to be available.

For observables that emit a sequence of person events like assumed in the example above, this sequence can be collected to an array like using the scan operator:

getSomeObservableOfPeople().scan(3).subscribe(data => {
  if(data.length >= 3) {
    this.person = data[2];
  }
})

Every time a new person is emitted, the callback passed to subscribe is called with the array where the people emitted by previous events are combined with the person emitted by the last event.

answered Jun 5, 2016 at 10:00

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sethreidnz Over a year ago

Thanks your answer does clarify some things. I have answered myself below for the actual question (which I admit was not 100% clear). Let me know if something I am doing is wrong. If not then I'll mark my own answer as the answer.

sethreidnz · Accepted Answer · 2016-06-05 22:16:11Z

1

After going away and coming back I think part of my confusion was not understanding what the observables actually were and how it worked.

What I was trying to do is the value of an array in an observable so that I could get another observable back that has the value of the selected person. The complete (semi-sudo code) would be as follows:

import * as _ from 'lodash';

export class DashboardComponent {
    people$: Observable<Person[]>;
    selectedPerson$: Observable<Person>;
    constructor(selectedPersonId){
        this.people$ = getSomeObservableArrayOfPeople();//gets the array in an observable from some source
        this.selectedPerson$ = this.people$.map((people) => this.getSelectedPerson(selectedPersonId, people));

    }    
    getSelectedPerson(selectedPersonId, people){
        if(!(state || people.length == 0)) return null;    
        return _.find(people, function(r: Person) { return r.id === selectedPersonId; });
    }
}

edited Jun 5, 2016 at 22:16

answered Jun 5, 2016 at 13:20

sethreidnz

6556 silver badges20 bronze badges

2 Comments

Günter Zöchbauer Over a year ago

It looks a bit weird that you pass this to getSelectedPerson(..., people) but if you use it for other things as well this might be fine. It's not obvious what _.find(...) should be. There is no _ in scope. I assume you call subscribe() there.

sethreidnz Over a year ago

You are corrent it was weird in this example, it was becuase in my real world example I wanted to be able to refer to a class variable with this.selectedPerson but I simplified that out in my example. Have updated it now.

Collectives™ on Stack Overflow

Get single member from an array from an rxJS observable

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related