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

ability to reach the sub-element dictionaries in typescript

How to incorporate HTML 5 video into your Angular 2 project using Typescript

Tips for Invoking an Overloaded Function within a Generic Environment

Using Angular and Typescript to Submit a Post Request

The error message "Property 'data1' is not a valid property on the object type {}"

experimenting with the checked attribute on a radio button with jasmine testing

Next.js is faced with a frustrating issue where images and videos are failing to display

Encountering a 401 error when trying to access OneNote resource in Angular 5 with Microsoft Graph

What is preventing the mat-slide-toggle from being moved inside the form tags?

Discover the latest DOM elements using Webdriverio 5

When using Typescript, I am encountering an issue where declared modules in my declaration file, specifically those with the file

learning how to transfer a value between two different components in React

The Nextjs application folder does not contain the getStaticPaths method

TS2367: Given any input, this condition will consistently evaluate to 'false'

"Encountered a type error with the authorization from the credentials provider

The 'validate' property within the 'MappingService' class cannot be assigned to the 'validate' property in the base class 'IMappingService' in typescript version 2.8.0

Angular Boilerplate is experiencing difficulties in properly reading ABP

Guide on uploading an image to Azure Blob Storage using v10 SDK

Item removed from the cache despite deletion error

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application