Angular 2 BehaviorSubject filtering technique

Question

Angular 2 BehaviorSubject filtering technique

I am attempting to filter a BehaviorSubject in Angular 2. The commissions object in the service is populated with data from an HTTP request. However, since it is initialized as "null", I am encountering an error at the line of code containing the filter method.

The error message reads:

Cannot read property '0' of null

This error occurs at the following code snippet:

.filter((commission: Commission[], index) => commission[index]._id === this.commissionid)

Below is the relevant code:

commissionService:

public commissions: Subject<Commission[]> = new BehaviorSubject<Commission[]>(null);

Within the component:

ngOnInit() {
    this.commissionService.commissions
        .filter((commission: Commission[], index) => commission[index]._id === this.commissionid)
        .subscribe(data => {console.log(data); })
}

I am wondering if changing the value of `this.commissionid` will allow the filter to work properly. Any insights on this issue would be appreciated. Thank you!

angular filter angular2-observables array-filter behaviorsubject

Answer 1

Answer №1

To retrieve a single object related to your subject, consider using the rxjs first operator. Check out more information about this operator here: http://reactivex.io/documentation/operators/first.html

get_single_object(id) {
    this.dataService.objects
        .first(o => o.id === id)
        .subscribe(result => {
            this.singleObject = result;
        })
}

Answer 2

To retrieve a single object related to your subject, consider using the rxjs first operator. Check out more information about this operator here: http://reactivex.io/documentation/operators/first.html

get_single_object(id) {
    this.dataService.objects
        .first(o => o.id === id)
        .subscribe(result => {
            this.singleObject = result;
        })
}

Answer 3

Answer №2

After some searching, I finally found the solution. Thank you for your assistance. Below is the complete code snippet:

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.commissionid = params.commissionid;
      if (this.commissionid) { this.init_obj(this.commissionid); }
    });

  }


  init_obj(id) {
    this.commissionService.commissions
        .map(function(data) {
          if (data) { return data.find(commission => commission._id === id); }
        })
        .subscribe(data => {
          if (data) { this.commission = data; }
        })

  }

Answer 4

After some searching, I finally found the solution. Thank you for your assistance. Below is the complete code snippet:

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.commissionid = params.commissionid;
      if (this.commissionid) { this.init_obj(this.commissionid); }
    });

  }


  init_obj(id) {
    this.commissionService.commissions
        .map(function(data) {
          if (data) { return data.find(commission => commission._id === id); }
        })
        .subscribe(data => {
          if (data) { this.commission = data; }
        })

  }

Angular 2 BehaviorSubject filtering technique

Answer №1

Answer №2

Similar questions

The Angular CLI has encountered an issue - Syntax Error: Unexpected token {

Guide to setting headers to application/json in Angular 2

Having trouble getting POST requests to work in Angular 8 for unknown reasons

Is there a way to efficiently load the json files only upon clicking the corresponding language button?

Error: ionic serve is unable to locate the 'reflect-metadata' module

Retrieve specific data points within a dataset

Angular Error: Unable to access properties of null (specifically 'validators')

An issue occurred when clicking on a line due to the filter

The Angular 2 UI is unable to successfully connect with the controller through the API call

extract objects from an array of objects based on a specified array

Is there a way to manually trigger a re-render of a component?

Angular template variables in VS Code now have the ability to automatically update their names when renamed

Sending a parameter to a route guard

Is there an issue with integrating Bootstrap with Angular 6?

An issue occurred at line 2, character 16 in the generateReport.service.ts file: TypeScript error TS2580 - The term 'require' is not recognized

Despite my efforts to properly run, my angular component is still not being added to the angular module

Encountered an error while attempting to run npm install for angular2-tree-component

Required Ionic form field alert

What steps can be taken to implement jQuery within an Angular 15 npm package?

Tips for configuring Angular 2 to send all requests in the form of application/x-www-form-urlencoded