Removing a particular item from an Observable of arrays containing any type

Question

Removing a particular item from an Observable of arrays containing any type

My application has an Observable that contains an array of places:

places: Observable<Array<any>>;

In the template, I am using the async pipe to iterate over the array:

<tr *ngFor="let place of places | async">
  ...
</tr>

After certain user actions, I need to remove a place with a specific id from this array. However, the code snippet I have tried does not work as expected:

deletePlace(placeId: number): void {
  this.apiService.deletePlace(placeId)
  .subscribe(
    (res: any) => {
      this.places
        .flatMap((places) => places)
        .filter((place) => place.id != placeId);
    }, 
    (err: any) => console.log(err)
  );    
}

Can anyone provide guidance on how to achieve this functionality?

javascript typescript angular rxjs

Answer 1

Answer №1

It's not possible to update an observable directly as it doesn't retain states, but you can respond to events triggered by it.

In your scenario, utilizing the scan operator and merging two streams into one would be a good approach:

One stream for initial loading
Another stream for delete events

Here is an example implementation:

let obs = this.http.get('/data').map(res => res.json());

this.deleteSubject = new Subject();

this.mergedObs = obs.merge(this.deleteSubject)
.startWith([])
.scan((acc, val) => {
  if (val.op && val.op==='delete') {
    var index = acc.findIndex((elt) => elt.id === val.id);
    acc.splice(index, 1);
    return acc;
  } else {
    return acc.concat(val);
  }
});

To delete an element, simply emit an event on the subject:

this.deleteSubject.next({op:'delete', id: '1'});

Check out this plunkr for a working demo: https://plnkr.co/edit/8bYoyDiwM8pM74BYe8SI?p=preview.

Answer 2

It's not possible to update an observable directly as it doesn't retain states, but you can respond to events triggered by it.

In your scenario, utilizing the scan operator and merging two streams into one would be a good approach:

One stream for initial loading
Another stream for delete events

Here is an example implementation:

let obs = this.http.get('/data').map(res => res.json());

this.deleteSubject = new Subject();

this.mergedObs = obs.merge(this.deleteSubject)
.startWith([])
.scan((acc, val) => {
  if (val.op && val.op==='delete') {
    var index = acc.findIndex((elt) => elt.id === val.id);
    acc.splice(index, 1);
    return acc;
  } else {
    return acc.concat(val);
  }
});

To delete an element, simply emit an event on the subject:

this.deleteSubject.next({op:'delete', id: '1'});

Check out this plunkr for a working demo: https://plnkr.co/edit/8bYoyDiwM8pM74BYe8SI?p=preview.

Answer 3

Answer №2

To make the most of the filter operator, follow this method:

this.items$
        .pipe(
            map(items => {
                // Add your specific condition here to filter out items that meet the condition
                return items.filter(item => item.itemId !== 0);
            }),
            map(response => (this.values$ = of(response)))
        )
        .subscribe(result => console.warn('Filtered Result: ', result));

Answer 4

To make the most of the filter operator, follow this method:

this.items$
        .pipe(
            map(items => {
                // Add your specific condition here to filter out items that meet the condition
                return items.filter(item => item.itemId !== 0);
            }),
            map(response => (this.values$ = of(response)))
        )
        .subscribe(result => console.warn('Filtered Result: ', result));

Answer 5

Answer №3

Updated with RxJS version 6

When using the solution provided for RxJS 6 and typescript, an error may occur due to different types being held by the observables. It is recommended to utilize combineLatest, as opposed to zip which will not function properly. Curious why? Find the explanation here :)

combineLatest([
  this.items$,
  this.deleteItem$
]).pipe(
  takeUntil(this.onDestroy),
  tap(([items, deleteItem]) => {
    if (deleteItem && deleteItem.op === 'deleteItem') {
      var index = items.findIndex((item) => item.id === deleteItem.id);
      if (index >= 0) {
        items.splice(index, 1);
      }
      return items;
    }
    else {
      return items.concat(deleteItem);
    }
  })
).subscribe();

Proceed to trigger the event..

this.deleteItem$.next({ op: 'deleteItem', id: '5e88fce485905976daa27b8b' });

I trust this information proves helpful to someone.

Answer 6

Updated with RxJS version 6

When using the solution provided for RxJS 6 and typescript, an error may occur due to different types being held by the observables. It is recommended to utilize combineLatest, as opposed to zip which will not function properly. Curious why? Find the explanation here :)

combineLatest([
  this.items$,
  this.deleteItem$
]).pipe(
  takeUntil(this.onDestroy),
  tap(([items, deleteItem]) => {
    if (deleteItem && deleteItem.op === 'deleteItem') {
      var index = items.findIndex((item) => item.id === deleteItem.id);
      if (index >= 0) {
        items.splice(index, 1);
      }
      return items;
    }
    else {
      return items.concat(deleteItem);
    }
  })
).subscribe();

Proceed to trigger the event..

this.deleteItem$.next({ op: 'deleteItem', id: '5e88fce485905976daa27b8b' });

I trust this information proves helpful to someone.

Answer 7

Answer №4

The filter functionality remains constant and does not alter the original array.

I propose updating the deletePlace function as follows:-

deletePlace(placeId: number): void {
  this.apiService.deletePlace(placeId)
  .subscribe(
    (res: any) => {
      this.places = this.places.filter((place) => place.id != placeId);
    }, 
    (err: any) => console.log(err)
  );    
}

Answer 8

The filter functionality remains constant and does not alter the original array.

I propose updating the deletePlace function as follows:-

deletePlace(placeId: number): void {
  this.apiService.deletePlace(placeId)
  .subscribe(
    (res: any) => {
      this.places = this.places.filter((place) => place.id != placeId);
    }, 
    (err: any) => console.log(err)
  );    
}

Removing a particular item from an Observable of arrays containing any type

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The output display is not visible

Can you explain the purpose of the yarn command --prefer-offline?

"Exploring the World of Button Coloration

What is the best way to access a value from a service scope in Angular 2?

Can the Three.js WebGLRenderer be utilized on a node.js server environment?

Stretching a row in Wordpress Visual Composer and setting the direction to Right-to-Left

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

Could Typescript decorators be used as mixins?

Switching the background image of a div when hovering over a particular list item

Conceal virtual keyboard on mobile when in autocomplete box focus

Issue with Pop Up not redirecting correctly after a successful login in Azure AD

Tips for keeping the Menu bar at the top of the page while scrolling from the middle

Using onDoubleClick with MUI TextField: A Quick Guide

Maintaining the user interface state while utilizing $resources in AngularJS

Activate AngularJS autocomplete when populating the input field using JavaScript

Why won't the CSS update in Next.js when the local state variable changes on page load?

Major Technical Issues Plague School-wide Celebration

The functionality of JSON.stringify does not take into account object properties

The online server is unable to access the route from the ajax function in a separate JavaScript file

The Angular JS Root scope is modified after submitting a form