Generate a fresh Array by evaluating the properties provided by an Observable

Question

Generate a fresh Array by evaluating the properties provided by an Observable

I am working with an observable called myObservable$ that provides a specific array of objects:

[
 { "firstProp": "A", "secondProp": "NA", "available": false },
 { "firstProp": "B", "secondProp": "NA", "available": true },
 { "firstProp": "C", "secondProp": "Old", "available": false },
 { "firstProp": "C", "secondProp": "New", "available": false }
]

My objective is to create a new array by filtering based on 'firstProp' and 'available', and then pushing into a new structure:

[
 { imgSrc: 'pathTo/myImages/file1.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'First Label'},
 { imgSrc: 'pathTo/myImages/file2.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'Second Label'},
 { imgSrc: 'pathTo/myImages/file3.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'Third Label'},
]

The current solution works, but I believe there may be room for improvement:

const OBJ1 = { imgSrc: 'pathTo/myImages/file1.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'First Label'};

const OBJ2 = { imgSrc: 'pathTo/myImages/file2.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'Second Label'};

const OBJ3 = { imgSrc: 'pathTo/myImages/file3.svg', badgeStyle: val?.available ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-check-circle fa-lg', cardLabel: 'Third Label'};



myObservable$.subscribe((value) => {
      value?.forEach((val) => {
        if (val?.firstProp === 'A') {
          this.myNewArray.push(OBJ1);
        } else if (val?.firstProp === 'B') {
          this.myNewArray.push(OBJ2);
        } else if (val?.firstProp === 'C' && val?.secondProp === 'New') {
          this.myNewArray.push(OBJ3);
        }
      });
    });

I am facing difficulties in handling the scenario where:

as I encounter two instances of 'firstProp' being 'C' with different types of 'secondProp' (Old and New). The challenge is to display 'exclamation' in badgeStyle when either one or both 'C' have "available": true, and to show a 'green-tick' for badgeStyle when both 'C' have "available": false.

angular typescript rxjs-observables

Answer 1

Answer №1

If you decide to redefine the myNewArray property as an Observable, it offers advantages over your current solution. One key benefit is that you won't have to worry about manually unsubscribing from the Observable, as Angular handles this automatically for you. Let's illustrate this below...

//...

// Let's redefine myNewArray as an Observable
myNewArray$: Observable<Array<{ imgSrc: string; badgeStyle: string; cardLabel: string }>>;

// Initialization of the above code is necessary, which we will do in the
// component constructor
constructor() {
  //... Initialize myObservable property here
  // Assign myNewArray here
  this.myNewArray$ = this.myObservable$.pipe(
    map((value) => {
      if (val?.firstProp === 'A') {
        return OBJ1;
      } else if (val?.firstProp === 'B') {
        return OBJ2;
      } else if (val?.firstProp === 'C' && val?.secondProp === 'New') {
        return OBJ3;
      }
      // Make sure to handle the else statement to avoid a ts error
    })
  );
}

//...

To utilize this, you would use the async pipe in the html section of your component's code.

<ng-container *ngIf="(myNewArray$ | async) as newdata">
  <!-- Insert content here -->
</ng-container>

By implementing this approach, you can reduce memory leaks since Angular manages the unsubscription process when the component is destroyed.

Answer 2

If you decide to redefine the myNewArray property as an Observable, it offers advantages over your current solution. One key benefit is that you won't have to worry about manually unsubscribing from the Observable, as Angular handles this automatically for you. Let's illustrate this below...

//...

// Let's redefine myNewArray as an Observable
myNewArray$: Observable<Array<{ imgSrc: string; badgeStyle: string; cardLabel: string }>>;

// Initialization of the above code is necessary, which we will do in the
// component constructor
constructor() {
  //... Initialize myObservable property here
  // Assign myNewArray here
  this.myNewArray$ = this.myObservable$.pipe(
    map((value) => {
      if (val?.firstProp === 'A') {
        return OBJ1;
      } else if (val?.firstProp === 'B') {
        return OBJ2;
      } else if (val?.firstProp === 'C' && val?.secondProp === 'New') {
        return OBJ3;
      }
      // Make sure to handle the else statement to avoid a ts error
    })
  );
}

//...

To utilize this, you would use the async pipe in the html section of your component's code.

<ng-container *ngIf="(myNewArray$ | async) as newdata">
  <!-- Insert content here -->
</ng-container>

By implementing this approach, you can reduce memory leaks since Angular manages the unsubscription process when the component is destroyed.

Generate a fresh Array by evaluating the properties provided by an Observable

The current solution works, but I believe there may be room for improvement:

I am facing difficulties in handling the scenario where:

Answer №1

Similar questions

Is it possible to utilize an npm package in TypeScript without a d.ts definition file?

The incorrect sequence of Angular/Protractor functions is causing issues within the tests

What is the correct way to specify Tesseract options for page segmentation?

Manage input from either mouse or touch events based on the event type

Mapping the changes in the checkbox of a material tree node

What is the best way to represent a directory structure in JSON using a C# data type?

Filling in placeholder information for HTTP posting during development

Create an HTML button on the homepage that directs users to the "about" page

What is the method in XState to trigger an event with the parameters send('EVENT_NAME', {to: 'a value from the context'})?

What is the process for enabling Namespaces in CRA?

Is there a way to display the data from a URL as selectable options in a dropdown menu?

Creating a TypeScript type or interface that represents an object with one of many keys or simply a string

Utilizing the patchValue function in Angular 2 Reactive forms to update elements within an FormControl Array

TypeScript: By providing a variable CLASS as an argument to a function, automatically determine the return type to be an object of the specified class without any additional information

What could be the reason for the authentication issues in ionic/angular?

How to make a unique array of arrays in Javascript without any repeated elements

Tips for testing an Angular Service that utilizes AngularFireDatabase by utilizing Jasmine Spy/Mock

Using JSON objects as values in Angular2

Angular2 route-driven themes

Exploring the detection of changes in variables using Aurelia