Swap out a specific object within an observable array by comparing object properties

Question

Swap out a specific object within an observable array by comparing object properties

Currently, I am retrieving an observable array of custom IPix objects (Observable<IPix[]>) from a database using an API. After that, I update a record in the database by sending an edited version of the IPix object back to the API through a PUT request (based on legacyConfigTrackerId).

I am trying to figure out how to replace the original IPix object in the displayed array with the modified copy (based on legacyConfigTrackerId). This way, any changes made to the record will immediately show up in the table without needing to search or refresh.

However, I am having trouble filtering the array correctly. Every time I attempt to filter it, the result comes back as undefined and nothing gets displayed:

  pixRecords$!: Observable<IPix[]>;

  updatePix(pix: IPix) {
    console.log('update clicked');

    this.pixRecords$ = 
      this.pixRecords$.pipe(
        map((records: IPix[]) =>
          records.filter((p: IPix) => {
            p.legacyConfigTrackerId !== pix.legacyConfigTrackerId 

            // need to do something to replace the original object in the array with the 'pix' argument
          })
        )
      );

    pix.contract.effectiveDate = this.revertEffDateFormat();
    pix.contract.termDate = this.revertTermDateFormat();
    this.pixService.putPix(pix);
    this.formattedEffDate = '';
    this.formattedTermDate = '';
    this.closeModal.next(null);
  }

Since I am new to Angular, my approach might be incorrect. Any suggestions would be greatly appreciated.

angular typescript observable angular14

Answer 1

Answer №1

When dealing with Observables, values are emitted and then disappear. A variable holding an Observable must be handled differently from other variables. It is not recommended to assign it directly (like this:

this.pixRecords$ = this.pixRecords$.pipe(...)

).

Instead, you have two options:

Store the emitted data in an array that can be manipulated in your code. (This is often the simplest approach.)
Utilize Observable features to hold onto the data and manipulate it within a pipeline.

For the latter option, there are various strategies:

Use the scan operator to keep the emitted array of data and make changes to it as needed.
Employ a BehaviorSubject to emit the fetched array from the http call into a BehaviorSubject, which remembers its last emission.

Here is a sample using the scan operator:

  products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log('Products: ', JSON.stringify(data))),
      catchError(this.handleError)
    );

  private productInsertedSubject = new Subject<Product>();
  productInsertedAction$ = this.productInsertedSubject.asObservable();

  allProducts$ = merge(
    this.products$,
    this.productInsertedAction$
  ).pipe(
    scan((acc, value) =>
      (value instanceof Array) ? [...value] : [...acc, value], [] as Product[])
  )

In this example, the retrieved products are emitted to the products$ Observable, while the UI binding is done through the allProducts Observable.

The productInsertedAction emits any newly added product. The addProducts$ Observable triggers whenever a new product is added.

By using the scan operator, the previous array of products is retained, allowing the code to reference it (as the acc variable) and make additions.

This code structure could be extended to include update and delete functionalities.

If you're new to Angular, I've included a link to an introductory video on RxJS for further exploration: https://youtu.be/vtCDRiG__D4

Answer 2

When dealing with Observables, values are emitted and then disappear. A variable holding an Observable must be handled differently from other variables. It is not recommended to assign it directly (like this:

this.pixRecords$ = this.pixRecords$.pipe(...)

).

Instead, you have two options:

Store the emitted data in an array that can be manipulated in your code. (This is often the simplest approach.)
Utilize Observable features to hold onto the data and manipulate it within a pipeline.

For the latter option, there are various strategies:

Use the scan operator to keep the emitted array of data and make changes to it as needed.
Employ a BehaviorSubject to emit the fetched array from the http call into a BehaviorSubject, which remembers its last emission.

Here is a sample using the scan operator:

  products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log('Products: ', JSON.stringify(data))),
      catchError(this.handleError)
    );

  private productInsertedSubject = new Subject<Product>();
  productInsertedAction$ = this.productInsertedSubject.asObservable();

  allProducts$ = merge(
    this.products$,
    this.productInsertedAction$
  ).pipe(
    scan((acc, value) =>
      (value instanceof Array) ? [...value] : [...acc, value], [] as Product[])
  )

In this example, the retrieved products are emitted to the products$ Observable, while the UI binding is done through the allProducts Observable.

The productInsertedAction emits any newly added product. The addProducts$ Observable triggers whenever a new product is added.

By using the scan operator, the previous array of products is retained, allowing the code to reference it (as the acc variable) and make additions.

This code structure could be extended to include update and delete functionalities.

If you're new to Angular, I've included a link to an introductory video on RxJS for further exploration: https://youtu.be/vtCDRiG__D4

Swap out a specific object within an observable array by comparing object properties

Answer №1

Similar questions

I am sorry, but there seems to be an issue with the JSON input as it is ending

Does Typescript extend Node.js capabilities?

What is the best way to free up memory after receiving responseText in a continuous streaming request?

Implementing Adsterra in your next.js or react.js project: A step-by-step guide

There are a pair of Ionic2 menus; one is currently visible while the other remains hidden

One way to consolidate multiple components in a single location without altering user-input data

Converting a string to a data type in Typescript: A beginner's guide

"Error occurs as a result of an unspecified attribute in the map

Children must be matched to the route before navigating to it

The API call retrieval encountered an issue due to CORS, as the nginx configuration settings were not correctly

Issue encountered while attempting to package Azure project in Visual Studio 2015 Update1 due to difficulty copying Typescript files

Exploring Jasmine and Karma for testing Angular 5 HTTP requests and responses

Guide to configuring a function to display the maximum value on a boxplot in Highcharts

Nearly every category except for one from "any" (all varieties but one)

Replace the function if it is specified in the object, otherwise use the default functionality

Steps for creating a table with a filter similar to the one shown in the image below

Is there a way to insert a Highchart Image into a spreadsheet in Excel?

Interactive form control for location details including country, state, district, and town

Angular material table cell coloring

Tips for typing a destructured object key in TypeScript