Converting data received from the server into a typescript type within an Angular Service

Question

Converting data received from the server into a typescript type within an Angular Service

Received an array of Event type from the server.

public int Id { get; set; }
public string Name { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }

For Angular and TypeScript, I need to transform it into the following class due to multiple pickers in the UI:

  id: number;
  name: string;
  startDate: Date;
  startTime: Date;
  endDate: Date;
  endDatetime: Date;

I am looking for a way to customize the mapping in my event.service.ts before subscribing to it in my component. How can this be achieved?

  getEvents(): Observable<Event[]> {
    return this.http.get<Event[]>(this.eventsUrl);
  }

c#angular typescript rxjs

Answer 1

Answer №1

Considering how to transform the data is crucial, so I will provide an example:

[{
    id: 1,
    name: "John"
}]

Data model implementation using Angular:

export class Person {
    public id: Number;
    public name: string;
    public idName: string;
}

Here's the code for the service:

getEvents(): Observable<Event[]> {
    return this.http.get<any[]>(this.eventsUrl).map<any[], Person[]>(o => {
        let result = [];
        for (let item of o) {
            let p: Person = {
                id: item.id,
                name: item.name,
                idName: item.id + ": " + item.name
            };
            result.push(p);
        }
        return result;
    });
}

This snippet hasn't been tested yet, but it serves as a demonstration of potential data manipulation.

Answer 2

Considering how to transform the data is crucial, so I will provide an example:

[{
    id: 1,
    name: "John"
}]

Data model implementation using Angular:

export class Person {
    public id: Number;
    public name: string;
    public idName: string;
}

Here's the code for the service:

getEvents(): Observable<Event[]> {
    return this.http.get<any[]>(this.eventsUrl).map<any[], Person[]>(o => {
        let result = [];
        for (let item of o) {
            let p: Person = {
                id: item.id,
                name: item.name,
                idName: item.id + ": " + item.name
            };
            result.push(p);
        }
        return result;
    });
}

This snippet hasn't been tested yet, but it serves as a demonstration of potential data manipulation.

Converting data received from the server into a typescript type within an Angular Service

Answer №1

Similar questions

Leverage a provider implementation within another implementation of the same provider in Angular

Input box in Angular matDatepicker fails when typing due to locale settings

Transferring client-side data through server functions in Next.js version 14

The component is not being activated by the subject subscribe

Encountering a hiccup during the installation process of Angular CLI

After unsubscribing from RxJS timer, it starts again

I require clarity on this befuddling syntax that feels like descending into

How can I use regex within a pipe to split a string in Angular 4?

Adding dynamic row values to a bootstrap table in angular 4 - what's the best approach?

Exploring the power of TypeScript for authenticating sessions with NextJS

Transferring data from the server to the client side in Next JS with the help of getInitialProps

Handling Click and Mouse Events with React [react-sortable-hoc, material-ui, react-virtualized]

using props as arguments for graphql mutation in react applications

Easily retrieve the value of a form control when it is changed with Form

Move the monitoring role from the server to the client side

Sorting the material table based on the column IDs, which usually correspond to the column names, may not align with the properties of the data

What is the best way to add JSX to the DOM using React?

Verify Angular Reactive Form by clicking the button

Even when I try to access the properties of the arguments object, it remains empty and has a zero

When attempting to utilize class validators in NestJS, Param is refusing to cast to DTO type