Rxjs find operator not working on values in Observable array

Question

I have a service in which Im casting my http payload to an Observable array, I would like to be able to call a method within that service to act on that observable. In my case I would like to confirm an ID exists in the array of Observable ID's. Ive done some research on stackoverflow and I think its because im mishandling the return of the find operator( as I understand it returns an observable ) .

Service :

@Injectable({
  providedIn: 'root'
})
export class RuleFieldsService {
  baseUrl: string;
  relativeUrl: string;
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };
  private rulefieldIdSub = new BehaviorSubject<any[]>([]);
  private rulefieldIdStore: { ruleFieldIds: any } = { ruleFieldIds: [] };
  rulefieldIds$ = this.rulefieldIdSub.asObservable();


  constructor(private readonly http: HttpClient, @Inject(APP_BASE_HREF) 
              private readonly baseHref: string) 
              {
                this.baseUrl = this.baseHref + environment.baseAPIUrl;
               };

  getRuleFields() {
    this.relativeUrl = 'rulefields';
    return this.http.get(this.baseUrl + this.relativeUrl);
  }


  getList(){
    
    this.relativeUrl = 'rulefields';

    this.http.get(this.baseUrl + this.relativeUrl + '/enabledropdown').subscribe(data => {
      this.rulefieldIdStore.ruleFieldIds = data;
      this.rulefieldIdSub.next(Object.assign({}, this.rulefieldIdStore).ruleFieldIds);
    });
  }

  checkRuleFieldType(ruleFieldId) {
    console.log('check method')
    this.rulefieldIds$.pipe(find((id: any) => id === ruleFieldId)).subscribe(items => {
        console.log("ID is in the list")
    });
  }      
}

Component :

@Component({
  selector: 'app-rules-tab-wrapper',
  templateUrl: './rules-tab-wrapper.component.html',
  styleUrls: ['./rules-tab-wrapper.component.scss']
})
export class RulesTabWrapperComponent implements OnInit {
public selectedIndex;
public ruleFieldIds$: Observable<any[]>;
  constructor(private rulesetService: RulesetService,
              private rulefieldService: RuleFieldsService) { }

  ngOnInit() {

    this.rulefieldService.getList();
     this.ruleFieldIds$ = this.rulefieldService.rulefieldIds$;
     this.rulefieldService.checkRuleFieldType(15);
     console.log(this.ruleFieldIds$ )
  }
}

Ive looked into the Observable to try and get a better idea of where the error may be, but I cant make actionable sense of the information :

source: BehaviorSubject
 closed: false
 hasError: false
 isStopped: false
 observers: Array(1)
  0: FindValueSubscriber
   closed: false
   destination: Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …}
   index: 2
   isStopped: false
   predicate: (id) => id === ruleFieldId
   source: Observable
   source: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
   _isScalar: false
   __proto__: Object
syncErrorThrowable: true
syncErrorThrown: false
syncErrorValue: null
thisArg: undefined
yieldIndex: false
  _parentOrParents: Subscriber
  closed: false
  destination: SafeSubscriber {closed: false, _parentOrParents: null, _subscriptions: null, syncErrorValue: null, syncErrorThrown: false, …}
  isStopped: false
  syncErrorThrowable: true
  syncErrorThrown: false
  syncErrorValue: null
  _parentOrParents: null
  _subscriptions: [FindValueSubscriber]
  __proto__: Subscription
_subscriptions: [SubjectSubscription]
__proto__: Subscriber
length: 1
__proto__: Array(0)
thrownError: null
_isScalar: false
_value:
 enableDropdownFor: (6) [15, 42, 55, 65, 67, 69]

Thank you for your insight in advance !

cjd82187 · Accepted Answer · 2020-07-07 20:03:59Z

1

You're understanding on how the "find" operator is a bit off. It is a filter and is meant to filter a stream of data that emits multiple values, but not emit anything till the value matches the predicate and then stop emitting.

https://rxjs-dev.firebaseapp.com/api/operators/find

Your example observable emits a single value, that happens to be an array. What you want to do in your function is use the rxjs map operator, and inside that you will have the array of values, and use the standard array's find (or findIndex), and return a boolean.

I've put together a little stack blitz demoing it, with some comments. https://stackblitz.com/edit/angular-dra5wu?file=src%2Fapp%2Fapp.component.html

here are some of the concepts and operators I was mentioning:

export class ExampleService {
  // start with "null" so we can filter that out, this way we know our get list has ran at least once if that's important
  private rulefieldIdSub = new BehaviorSubject<any[]>(null);
  
  // we skip the intial "null" value, this makes sure "getList" has populated the rules
  rulefieldIds$ = this.rulefieldIdSub.asObservable().pipe(filter(ids => ids !== null));

  getList(){
    // making a fake list for example purposes, running in a set timeout so it takes a second
    setTimeout(() => {
      this.rulefieldIdSub.next([1,3,5,7,9])
    }, 1000);
  }

  checkRuleFieldType(ruleFieldId): Observable<boolean> {
    return this.rulefieldIds$.pipe(
      // we're using the "map" operator to transform the result from the observable into something else
      // https://rxjs-dev.firebaseapp.com/api/operators/map
      map(ruleFieldIds => {
        // map gets the full array of your ruleField ids, now we return if we found that id or not
        return ruleFieldIds.findIndex(id => id === ruleFieldId) !== -1;
      })
    )
      
  }    
 
}

And an updated component that uses it

export class AppComponent  {
  name = 'Angular';
  rulefieldIds$: Observable<any[]>;

  constructor(public exampleService: ExampleService) {
    this.exampleService.getList();
    this.rulefieldIds$ = this.exampleService.rulefieldIds$;

    this.exampleService.checkRuleFieldType(15).subscribe(result => {
      console.log("Do we have 15?", result)
    });

    this.exampleService.checkRuleFieldType(5).subscribe(result => {
      console.log("Do we have 5?", result)
    });
  }
}

answered Jul 7, 2020 at 20:03

cjd82187

3,5933 gold badges17 silver badges20 bronze badges

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

5 Comments

ManBearPig Over a year ago

Thank you, this is certainly a step in the right direction and makes more sense than it did before! However I am getting : ruleFieldIds.findIndex is not a function, similarly if I try to use .find. Would I still need to implement my observable using : private rulefieldIdStore: { ruleFieldIds: any } = { ruleFieldIds: [] }; ?

cjd82187 Over a year ago

If you are initializing the BehaviorSubject with something that is not an array, and not filtering it out or checking for that in the map you will likely get an error like that. In my example I filter to make sure its not null when I create rulefieldIds$

ManBearPig Over a year ago

Well how about that! Clarity, hazzah! Thank you sir, I have learned more from you in 20 minutes than 4 hours of painstaking research and troubleshooting. Now I can make sure my team adheres to this practice haha :).

cjd82187 Over a year ago

Glad I could help! Always have a look at rxjs-dev.firebaseapp.com or learnrxjs.io when you need to use one of the features. They tend to have diagrams explaining how they work and examples. When in doubt, log what the value is in your operator, it could be its not the type you expect.

ManBearPig Over a year ago

The diagrams certainly helped, I was almost taken aback by how useful they are :).

Collectives™ on Stack Overflow

Rxjs find operator not working on values in Observable array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related