Utilize Angular 9 to fetch data from an API using the Get method, map them to a class, and

Question

Utilize Angular 9 to fetch data from an API using the Get method, map them to a class, and

Seeking to extract information from a test URL and convert the data into a list, I aim to exhibit them in an alert/Loop for testing purposes. The dummy API URL being used is:

The returned data follows this structure:

{"status":"success","data":[{"id":"1","employee_name":"Tiger Nixon","employee_salary":"320800","employee_age":"61","profile_image":""},{"id":"2","employee_name":"Garrett Winters","employee_salary":"170750","employee_age":"63","profile_image":""} ...

Displayed below is the TypeScript code segment:

constructor(private http: HttpClient) { }
configUrl = 'http://dummy.restapiexample.com/api/v1/employees';
getEmployees() {
var x = this.http.get<Employee[]>('http://dummy.restapiexample.com/api/v1/employees').pipe(map(res => res['data']));
alert(JSON.stringify(x));
}

This represents the Employee class utilized:

export class Employee {
id: any;
employee_name: any;
employee_salary: any;
employee_age: any;
profile_image: any;
}

According to my exploration, one should apply pipe(map(res =>res['data']), however, it isn't functioning correctly in my case. Any assistance in comprehending what might be incorrect with the aforementioned code would be greatly appreciated.

angular typescript

Answer 1

Answer №1

In the latest version of HttpClient, data mapping is not required. This eliminates the need for a pipe operator in this scenario. Additionally, in order to actually receive the data, you must subscribe.

Take a look at the example below:

constructor(private http: HttpClient) { }
configUrl = 'http://dummy.restapiexample.com/api/v1/employees';
getEmployees() {
var x = this.http.get<Employee[]>('http://dummy.restapiexample.com/api/v1/employees');
return x;
//alert(JSON.stringify(x)); This won't work because you need to first subscribe to the observable.
}

// Let's assume there is a main function that calls your getEmployees function. Here is what you should do

main() {
  this.getEmployees().subscribe(x => {
    alert(JSON.stringify(x));
  });
}

Answer 2

In the latest version of HttpClient, data mapping is not required. This eliminates the need for a pipe operator in this scenario. Additionally, in order to actually receive the data, you must subscribe.

Take a look at the example below:

constructor(private http: HttpClient) { }
configUrl = 'http://dummy.restapiexample.com/api/v1/employees';
getEmployees() {
var x = this.http.get<Employee[]>('http://dummy.restapiexample.com/api/v1/employees');
return x;
//alert(JSON.stringify(x)); This won't work because you need to first subscribe to the observable.
}

// Let's assume there is a main function that calls your getEmployees function. Here is what you should do

main() {
  this.getEmployees().subscribe(x => {
    alert(JSON.stringify(x));
  });
}

Utilize Angular 9 to fetch data from an API using the Get method, map them to a class, and

Answer №1

Similar questions

Hide the navigation menu when a page link is selected

How to handle form-data in NestJS Guards?

Issue with form array patching causing value not to be set on material multiple select

Tips for utilizing an adaptive design with Angular

Dispatch a websocket communication from a synchronous function and retrieve the information within the function itself

What is the method for setting autofocus to the first input element within a loop?

Error message "Undefined is not a constructor" can occur when using Ionic2 with Karma and Jasmine

Change classes of sibling elements using Angular 2

Injecting dynamic templates in Angular 7

Storing dates using Angular 2 and JSON for efficient data management

Nested loop with Angular and Bootstrap Modal

Angular Material Rotate Ink Bar to Vertical Orientation

Firebase V9: Uploading and Updating Documents

What steps can I take to guarantee that the observer receives the latest value immediately upon subscribing?

Angular 4 enum string mapping reversed

One way to display a table is by populating it with data from an API. If the table does

Accessing files from various directories within my project

Tips for accessing an item from a separate TypeScript document (knockout.js)

Develop a fresh category inspired by the properties of objects

Unexpected Issue: Angular 12 Encounters JIT Compiler Unavailability