Leveraging Classes for Http Observables in Angular 12

Question

Leveraging Classes for Http Observables in Angular 12

Utilizing the power of Angular 12

The backend response received from the HTTP service is structured as follows:

Array<{
   id: string;
   title: string;
   created: string;
}>

// Service
public list(): Observable<Array<Item>> {
  return this.http.get<Array<Item>>(url);
}

// Component
this.service.list().subscribe(res => {
  this.item = res;
});

Implemented a model class to properly typecast the response data

export class Item {
  id: string;
  title: string;
  created: string;

  get parsedTitle() {
    const t = this.title;
    // perform some parsing on title
    return t;
  }
}

When attempting to display the parsed title using parsedTitle in the HTML, no output is generated.

Experimented with changing the getter to a function public parsedTitle(){}, but encountered an error stating parsedTitle is not a function.

How can I successfully convert the returned observable into instances of class objects from an array of objects?

angular typescript angular-observable

Answer 1

Answer №1

To convert the plain objects to instances of the actual Item class, you can follow this approach:

// Define the Item class
class Item {
    constructor(item: Partial<Item>) {
        Object.assign(this, item);
    }

    id: string = '';
    title: string = '';
    created: string = '';

    get parsedTitle() {
        const t = this.title;
        // Perform some parsing on the title
        return t;
    }
}

// Implement the service method
public getList(): Observable<Array<Item>> {
  return this.http.get<Array<Item>>(url).pipe(
    map(items => items.map(item => new Item(item))),
  );
}

Answer 2

To convert the plain objects to instances of the actual Item class, you can follow this approach:

// Define the Item class
class Item {
    constructor(item: Partial<Item>) {
        Object.assign(this, item);
    }

    id: string = '';
    title: string = '';
    created: string = '';

    get parsedTitle() {
        const t = this.title;
        // Perform some parsing on the title
        return t;
    }
}

// Implement the service method
public getList(): Observable<Array<Item>> {
  return this.http.get<Array<Item>>(url).pipe(
    map(items => items.map(item => new Item(item))),
  );
}

Answer 3

Answer №2

Consider the approach of utilizing classes in various programming languages. Typically, you must create an object of that particular type by invoking the class constructor to be able to employ your methods (unless they are static functions).

When adapting this concept to your scenario, avoid simply instructing TypeScript to recognize the objects fetched from the API as instances of Item. Instead, construct new Item instances using these objects.

Add a constructor to your Item class that takes a parameter and copies all properties found in that object into this (the current instance).

export class Item {
  id: string;
  title: string;
  created: string;

  constructor(item?: Item) {
    Object.assign(this, item ?? {});
  }

  get parsedTitle() {
    const t = this.title;
    // perform some parsing on title
    return t;
  }
}

In your service class, ensure that you convert the objects retrieved from the API into a legitimate array consisting of instances of type Item in the following manner:

// Service
public list(): Observable<Array<Item>> {
  return this.http.get<Array<Item>>(url).pipe(
    map(item => new Item(item))
  );
}

Answer 4

Consider the approach of utilizing classes in various programming languages. Typically, you must create an object of that particular type by invoking the class constructor to be able to employ your methods (unless they are static functions).

When adapting this concept to your scenario, avoid simply instructing TypeScript to recognize the objects fetched from the API as instances of Item. Instead, construct new Item instances using these objects.

Add a constructor to your Item class that takes a parameter and copies all properties found in that object into this (the current instance).

export class Item {
  id: string;
  title: string;
  created: string;

  constructor(item?: Item) {
    Object.assign(this, item ?? {});
  }

  get parsedTitle() {
    const t = this.title;
    // perform some parsing on title
    return t;
  }
}

In your service class, ensure that you convert the objects retrieved from the API into a legitimate array consisting of instances of type Item in the following manner:

// Service
public list(): Observable<Array<Item>> {
  return this.http.get<Array<Item>>(url).pipe(
    map(item => new Item(item))
  );
}

Answer 5

Answer №3

In the scenario you described, the issue arises from the fact that the object received from the backend (in this case, in JSON format) is being serialized to the target type (an instance of `Item`) without being initialized using its constructor.

To resolve this issue and successfully achieve your objective, each `object` needs to be initialized by creating a new instance of `Item` using the `new Item()` constructor.

You can implement this by following the example below:

item.model.ts:

export class Item {
  id: string;
  title: string;
  created: string;

  get parsedTitle() {
    const t = this.title;
    // perform necessary parsing on the title
    return t;
  }

  constructor(item: Partial<Item>) {
    Object.assign(this, item);
  }
}

items.service.ts:

// Service
public list(): Observable<Array<Item>> {
  return this.http
    .get<Array<Item>>(url)
    .pipe(map(items => items.map(item => new Item(item))));
}

Answer 6

In the scenario you described, the issue arises from the fact that the object received from the backend (in this case, in JSON format) is being serialized to the target type (an instance of `Item`) without being initialized using its constructor.

To resolve this issue and successfully achieve your objective, each `object` needs to be initialized by creating a new instance of `Item` using the `new Item()` constructor.

You can implement this by following the example below:

item.model.ts:

export class Item {
  id: string;
  title: string;
  created: string;

  get parsedTitle() {
    const t = this.title;
    // perform necessary parsing on the title
    return t;
  }

  constructor(item: Partial<Item>) {
    Object.assign(this, item);
  }
}

items.service.ts:

// Service
public list(): Observable<Array<Item>> {
  return this.http
    .get<Array<Item>>(url)
    .pipe(map(items => items.map(item => new Item(item))));
}

Answer 7

Answer №4

The main issue at hand is that you are failing to instantiate the Item class and assign the API response to it. The conversion from the response to the Item class needs to be handled explicitly as it won't occur automatically. In your current code, an attempt is made to access title on this object where this is not available since it has not been instantiated.

Make a slight adjustment in the code like below:

// Service

public list(): Observable<Array<Item>> {
  return this.http.get<Array<Item>>(url)
         .pipe(map((items) => (items.map((item) => (new Item(item))))));
}

Answer 8

The main issue at hand is that you are failing to instantiate the Item class and assign the API response to it. The conversion from the response to the Item class needs to be handled explicitly as it won't occur automatically. In your current code, an attempt is made to access title on this object where this is not available since it has not been instantiated.

Make a slight adjustment in the code like below:

// Service

public list(): Observable<Array<Item>> {
  return this.http.get<Array<Item>>(url)
         .pipe(map((items) => (items.map((item) => (new Item(item))))));
}

Leveraging Classes for Http Observables in Angular 12

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Turning XSD into TypeScript code

Exploring the Incorporation of String as a Component Identifier in React and TypeScript

In TypeScript, there is a mismatch between the function return type

When using React MUI Autocomplete, make sure to handle the error that occurs when trying to filter options using the

JavaScript's async function has the capability to halt execution on its own accord

The function that was provided as a parameter is not functioning as expected

Steps to arrange by the number of rows in ag grid

Tips for successfully clearing the localStorage in an Ionic2 application upon exiting

When working with multiple charts on Angular ChartJs, the data may not display properly

Explanation of TypeScript typings for JavaScript libraries API

Incorporate a fresh attribute to the JSON data in an Angular API response

Removing item from Angular service

Incorporating a TypeScript module into a JavaScript module within a React application

Mismatch between generic types

Having trouble with ng build optimization error in Angular?

Using Highcharts to dynamically color a map based on data values in a React TypeScript project

Guide on importing videojs-offset library

Tips for dynamically inserting latitude and longitude into an iframe map URL using the Angular ngFor directive

Ways to attach a label to router-outlet

Ways to sort through a Unix timestamp