Angular 4: Utilizing a class with a constructor to create an http Observable model

Question

Angular 4: Utilizing a class with a constructor to create an http Observable model

Within my application, I have a Class model that is defined with a constructor. Here is an example:

export class Movie {
    title: string;
    posterURL: string;
    description: string;

    public constructor(cfg: Partial<Movie>) {
        Object.assign(this, cfg);
    }

    getEndDate(): Date {
        return new Date();
    }
};

Additionally, I have an HTTP request that utilizes this model

getMoviesData(): Observable<Movie[]> {
    return this.http.get<Movie[]>(`http://localhost:3544/movies`)
}

As anticipated, there seems to be an issue

What steps can I take to resolve this matter? Do I need to create an interface as well?

Thank you for your assistance :)

angular typescript

Answer 1

Answer №1

HTTPClient functions are universal, with this.http.get<Film[]> ensuring that the output adheres to the Film[] structure without creating new Film objects.

To convert the output into object instances, it is necessary to explicitly instantiate a class. The class constructor should ideally accept a simple object whose properties will be assigned to an instance of the class. With the Film class, this is achieved through the cfg parameter.

Instead of relying solely on the Partial<Movie> type which may not fully describe the interface, it would be advisable to define a distinct interface:

interface IFilm {
    title: string;
    posterURL: string;
    description: string;
}

class Film implements IFilm { ... }

...

getFilmData(): Observable<Film[]> {
    return this.http.get<IFilm[]>(...)
    .map(rawFilms => rawFilms.map(rawFilm => new Film(rawFilm)))
}

Answer 2

HTTPClient functions are universal, with this.http.get<Film[]> ensuring that the output adheres to the Film[] structure without creating new Film objects.

To convert the output into object instances, it is necessary to explicitly instantiate a class. The class constructor should ideally accept a simple object whose properties will be assigned to an instance of the class. With the Film class, this is achieved through the cfg parameter.

Instead of relying solely on the Partial<Movie> type which may not fully describe the interface, it would be advisable to define a distinct interface:

interface IFilm {
    title: string;
    posterURL: string;
    description: string;
}

class Film implements IFilm { ... }

...

getFilmData(): Observable<Film[]> {
    return this.http.get<IFilm[]>(...)
    .map(rawFilms => rawFilms.map(rawFilm => new Film(rawFilm)))
}

Angular 4: Utilizing a class with a constructor to create an http Observable model

Answer №1

Similar questions

Tips for reverting from Angular 7 to Angular 6

Using Vue js and Typescript to automatically scroll to the bottom of a div whenever there are changes in

Having trouble with implementing custom checkboxes in a d3 legend?

Implementing Angular functionality with Bootstrap's collapse component

Expanding User Type to Include Extra User Data Using NextAuth.js

Experimenting with a function that initiates the downloading of a file using jest

Ways to address the issue arising from the utilization of the "as" keyword

Tips for receiving @ mentions in PrimeNg Editor using Quill and quill-mention with Angular

What is the best approach to handling an undefined quantity of input FormControls within Angular?

Difficulty in detecting variable modifications during testing - Angular2+

Oops! An error occurred: Validation Error - Unable to convert value to ObjectID

In Angular, there is an issue where the @ViewChild decorator does not reflect changes when the value of the child component is updated within the

I'm trying to figure out the best way to successfully pass a prop to another component in TypeScript without running into the frustrating issue of not being able to

Is NATS.io compatible with React Native?

How can I make the snackbar open multiple times in a row?

Utilize an external JavaScript function within a React and TypeScript document

What is the method to retrieve the total number of days in a moment-jalaali using NodeJS?

The connection to Firebase is being refused when attempting to use the http.post method in Ionic

Is a shallow copy created by spreading?

Using React's higher order component (HOC) in TypeScript may trigger warnings when transitioning from non-TypeScript environments