Ways to transfer certain characteristics of an Observable to a different Observable by leveraging RxJS operators

I am working with two Observables, employee$ and personalInformation$. The personalInformation$ Observable is a subset of employee$ and I need to map the matching properties from employee$ to personalInformation$. Although both observables have many more fields, I have simplified them here for clarity.

export interface EmployeeModel {
  id: number;
  personalEmail: string;
  firstName: string;
  lastName: string;
  remote: boolean;
  office: string;
}
employee$: Observable<EmployeeModel>;

Personal Information

export interface PersonalInformationModel {
  id: number;
  personalEmail: string;
  firstName: string;
  lastName: string;
}
personalInformation$: Observable<PersonalInformationModel>;

This was my initial attempt which did not yield the desired result.

    this.personalInformation$ = this.employee$
      .pipe(
        map((data) => ({
          id: data!.id,
          personalEmail: data!.personalEmail,
          firstName: data!.firstName,
          lastName: data!.lastName
        })),
        catchError(err => {
          const message = "Could not load record";
          this.logService.error(message, err)
          return throwError(() => new Error(err));
        })
      );

Answer №1

When utilizing an arrow function, ensure that you enclose the object correctly. You should include another set of parentheses around the 'squigly braces {}' within your map function.

this.personalInfo$ = this.employee$
      .pipe(
        map((data) => ({
          id: data.id,
          personalEmail: data.personalEmail,
          firstName: data.firstName,
          lastName: data.lastName
        })),
        catchError(err => {
          const message = "Could not fetch record";
          this.logService.error(message, err)
          return throwError(() => new Error(err));
        })
      );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve values from an async function with Ionic Storage

How can I retrieve the values of a token and user id that are stored in Ionic storage? Currently, I have implemented the following: auth.service.ts getToken() { return this.storage.get(TOKEN_KEY); } getId() { this.storage.get(ID); } crud.serv ...

The httpClient post request does not successfully trigger in an angular event when the windows.unload event is activated

Is there a way to send a post request from my client to the server when the user closes the tab or browser window? I have tried using the 'windows.unload'or 'windows.beforeunload' event, but the call doesn't seem to be successful a ...

The 'type' property within the NGRX Effect is not present in the type Observable<any[]>

I am currently in the process of upgrading my Angular app from version 6 to version 7. Additionally, I am upgrading the TypeScript version from 2.7.2 to 3.1.6. The issue I'm encountering is that TypeScript is flagging an error stating that my ngrx ef ...

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

I'm having trouble accessing the fileHandler object from my logger in order to flush the buffer to the file. This is the program I am working with: import * as log from "https://deno.land/<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

Issues with Angular's router outlet link functionality not performing as expected

I am encountering difficulties trying to create a link to a named router outlet in Angular. Let's focus on the most crucial part of the code: app-routing-module.ts: import { NgModule } from '@angular/core'; import { RouterModule, Routes } ...

I am developing a JWT authentication and authorization service for my Angular application. However, I am running into issues when trying to implement observables

I have created a user class and required interfaces as outlined below: user.ts import { Role } from '../auth/auth.enum' export interface IUser { _id: string email: string name: IName picture: string role: Role | string userStatus: b ...

retrieve a shared string from an array when toggled

Regarding the use of SelectionModel for mat-checkbox, a function is called on each click: toggleSelection(row) { this.selection.toggle(row); console.log("Selection"); console.log("this", this.selection.selected); this.selection.selected.f ...

Prisma designs a personalized function within the schema

In my mongo collection, there is a field named amount. My requirement is to have the amount automatically divided by 100 whenever it is requested. In Django, this can be achieved with a custom function within the model. Here's how I implemented it: cl ...

Determine the data type of an individual attribute within a collection of classes

I am working with a series of classes that have a body property defined within them. Here is an example: class Foo { body: {foo: string} constructor(body: Record<string, string>) { this.body = { foo: body.foo } } } class Bar { body: {ba ...

No pathways can be established within Core UI Angular

I've been attempting to use the router link attribute to redirect to a new page, but instead of landing on the expected page, I keep getting redirected to the dashboard. Below is an overview of how my project's structure looks: [![enter image de ...

Dealing with a Typescript challenge of iterating over a tuple array to extract particular values

I am struggling with writing a function that extracts names from an array of tuples, where each tuple includes a name and an age. My current attempt looks like this: type someTuple = [string, number] function names(namesAndAges: someTuple[]) { let allNa ...

Angular - Implementing *ngFor for nested table rows

I am currently working with an object that has a specific data structure: - title - id - [artists] - { artist obj / document , - [albums] - { album obj / document }, - { - album obj / document ...

Angular - The element contains an implicit 'any' type due to the absence of an index signature in the 'AbstractControl' type

Within my Angular-11 project, I am utilizing the following TypeScript code: multistep = new FormGroup({ userDetails: new FormGroup({ first_name: new FormControl(''), last_name: new FormControl(''), other_na ...

Using Docker to Deploy an Angular Frontend alongside a NodeJS/Express Backend

I recently created a web application using Angular for the frontend and NodeJS/Express for the backend. While everything is working smoothly locally, I encountered an issue when trying to move the application to Docker containers. The problem arises with ...

Using a unique Angular module in various projects: A step-by-step guide

I am looking to develop a shared module that will house components such as login, sidebar, as well as pipes, services, and directives. @NgModule({ declarations: [ AppComponent, LoginComponent, SidebarComponent, InitialsPipe ], import ...

How can esbuild be used to load .wglsl files in Typescript files?

I'm currently utilizing esbuild to bundle my Typescript code, but I'm facing a challenge with configuring a loader for ".wgsl" files. Here is my app.ts file: import shader from './shader.wgsl'; //webgpu logic This is my shader.d.ts fi ...

"Encountering an issue with mounting components in React Unit Testing with Jest and Typescript

Having developed a simple app with components, here is the code: import GraphicCanvas from './Graphing/GraphCanvas'; import { drawCircle } from './Graphing/DrawCircle'; function App() { return ( <div className="App"&g ...

Creating PropTypes from TypeScript

Currently in my React project, I am utilizing TypeScript along with PropTypes to ensure type checking and validation of props. It feels redundant to write types for both TypeScript and PropTypes, especially when defining components like ListingsList: inte ...

Creating a CSS animation to slide a div outside of its container is

I currently have a flexbox set up with two adjacent divs labeled as DIV 1 and DIV 2. By default, both DIV 1 and DIV 2 are visible. DIV 2 has a fixed width, occupying around 40% of the container's width. DIV 1 dynamically adjusts its width to ac ...

Despite passing the same dependency to other services, the dependencies in the constructor of an Angular2 Service are still undefined

To successfully integrate the "org-agents-service" into the "org-agents-component," I need to resolve some dependencies related to the required api-service. Other components and services in the hierarchy are also utilizing this api-service, which acts as a ...