Angular class mapping of web API response

Question

Angular class mapping of web API response

I have a web API action method that returns a chapter ID and chapter name. I would like to convert this into an Angular class with an additional field called 'Edit', which by default is set to false.

export class Chapter {
  chapterid: number;
  chaptername: string;
  Edit: boolean = false;
}

 public Chapters: any;

this.http.get<Chapter>(this.baseUrl + 'api/Chapters').subscribe((response) => { this.Chapters = response; console.log(this.Chapters); }, error => console.log(error));

However, I'm not able to retrieve the extra field 'Edit'.

angular asp.net-web-api

Answer 1

Answer №1

It seems that the API /api/Chapters returns an array of objects containing properties like chapterid and chaptername. To handle this, you can update your code as follows:

this.http.get<Chapter[]>(this.baseUrl + 'api/Chapters')
                 .pipe(
                     map(chapters => {
                         return chapters.map(c => {return {...c, isEditable: false}});
                     }),                     
                 )
                 .subscribe((response) => { this.Chapters = response; console.log(this.Chapters); }, error => console.log(error));

Answer 2

It seems that the API /api/Chapters returns an array of objects containing properties like chapterid and chaptername. To handle this, you can update your code as follows:

this.http.get<Chapter[]>(this.baseUrl + 'api/Chapters')
                 .pipe(
                     map(chapters => {
                         return chapters.map(c => {return {...c, isEditable: false}});
                     }),                     
                 )
                 .subscribe((response) => { this.Chapters = response; console.log(this.Chapters); }, error => console.log(error));

Angular class mapping of web API response

Answer №1

Similar questions

Angular 2 Demonstrate Concealing and Revealing an Element

Utilizing Angular for enhanced search functionality by sending multiple query parameters

The search for 'Renderer2' in '@angular/core' did not yield any results

Populate an array using a web API AJAX request in jQuery

Having trouble retrieving data from a JSON file within an Angular application when utilizing Angular services

Angular does not recognize the boolean variable

Calculating the length of time based on a specific date in Angular 2+: A step-by-step

I am trying to figure out how to retrieve the name of the property that is bound to [(ngModel)] in Angular 6

Encountering a problem with Firebase file uploading when using the "express-fileupload" library

Is there a way to load children components in my Routes from a module hosted on a CDN?

Has anyone discovered an Angular2 equivalent to $provide.value() while testing promises?

Angular ngFor does not display the JSON response from the API (GET request)

Angular 2/Typescript experiencing a glitch with Jquery carousel functionality

What is the process for upgrading ag-Grid to newer versions?

Creating a Session Timeout feature for Ionic/Angular that includes resetting the timer with each new user interaction

Create a Bar Graph Using a List

Navigating within the same URL page in Ionic 5

Stop the transmission of ts files

Using Fixed Patterns and Combining Types in an Interface

Using Angular Platform-server (Universal) to route with query parameters