A guide on transforming an Observable of one type into an Observable of a different type

Question

A guide on transforming an Observable of one type into an Observable of a different type

Currently, I am working on an Angular application that utilizes NGRX for state management. One of the challenges I am facing is dealing with a selector that returns an Observable.

export const mySelector = createSelector(state, (state: IState) => state.field.array);

The Observable returned by this selector has the format {name:string; age:number}[].

What I am trying to achieve is transforming this data format into something like {first-name:string}. However, I am unsure about which operator I should use for this transformation.

My aim is to store the new data in a variable within the subscribe function, similar to the following:

myVariable: {first-name:string};

this.store.pipe(select(mySelector))
         .pipe(//I need to find the right operator for data transformation here)
         .subscribe(result => {myVariable = result})

angular typescript rxjs operators

Answer 1

Answer №1

To accomplish this task, you have two options available:

function convertData(data: { title: string; year: number }[]) {
  return data.map(({ title, year }) => ({
    "movie-title": title,
    year
  }));
}

this.dataStore
  .pipe(
    select(myDataSelector),
    map(convertData)
  )
  .subscribe(result => {
    myMovies = result;
  });

The second option is to implement the transformation within your selector function:

function convertData(data: { title: string; year: number }[]) {
  return data.map(({ title, year }) => ({
    "movie-title": title,
    year
  }));
}

this.dataStore
  .pipe(
    select(
      pipe(
        myDataSelector,
        convertData
      )
    )
  )
  .subscribe(result => {
    myMovies = result;
  });

Answer 2

To accomplish this task, you have two options available:

function convertData(data: { title: string; year: number }[]) {
  return data.map(({ title, year }) => ({
    "movie-title": title,
    year
  }));
}

this.dataStore
  .pipe(
    select(myDataSelector),
    map(convertData)
  )
  .subscribe(result => {
    myMovies = result;
  });

The second option is to implement the transformation within your selector function:

function convertData(data: { title: string; year: number }[]) {
  return data.map(({ title, year }) => ({
    "movie-title": title,
    year
  }));
}

this.dataStore
  .pipe(
    select(
      pipe(
        myDataSelector,
        convertData
      )
    )
  )
  .subscribe(result => {
    myMovies = result;
  });

A guide on transforming an Observable of one type into an Observable of a different type

Answer №1

Similar questions

Refreshing a paginated mat-table in Angular results in missing row data

Extending the type of parameters in TypeScript

Establish a route nickname for files outside the project directory

Using Angular2's BrowserDomAdapter as an alternative to JQuery's .has() for analog functionality

React, Storybook - Error TS2307: Button module not found or its type declarations. Can Storybook resolve this issue?

What is the correct way to input the 'name' HTML attribute in an Ant Design select element?

Angular 6: Harnessing the Power of Subject

Issues with Ajax calls in IOS on Ionic Cordova, functioning properly on Android

Transmit a batch of images from Angular to the ExpressJS server using POST method with multer

Having difficulty deploying the ASP.Net application in Visual Studio

Adding color background to specific text within an input field in Angular for highlighting purposes

Next.js 13 app directory experiences 404 Not Found error due to dynamic routing issues

Error encountered in Jest mockImplementation: Incompatible types - 'string[]' cannot be assigned to 'Cat[]' type

Issue with res.redirect not properly redirecting to https site

Resolving Hot-Reload Problems in Angular Application Following Upgrade from Previous Version to 17

When no values are passed to props in Vue.js, set them to empty

TypeScript error: Cannot find property 'propertyName' in the 'Function' type

Can TypeScript support promise chaining in a functional way?

The dropdown feature is malfunctioning. (Using Angular 8 and Bootstrap)

Angular template-driven forms with a custom validator allows for creating your own validation