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

Issue with NzPicker (nz-year-picker) due to absence of animation

Risky assignment of an 'any' value" encountered while implementing react-transition-group in TypeScript

Ensuring the type of a specific key in an object

Encountering difficulties with implementing reactive forms in an Ionic Angular 7 project as the app.module.ts file appears to be missing

Troubleshooting Angular modal fade not functioning

Style will be applied to Angular2 when the object's ID exceeds 100

There was an issue retrieving the metadata for the bootstrap package using the git+ssh protocol

Using the spread operator in Typescript with an object that contains methods

Encountering an error while compiling the Angular 8 app: "expected ':' but got error TS1005"

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

Eliminate Elements from Array - Angular Four

How to include an image in a file type using Angular 2 and TypeScript

Refreshing the cache in SWR, but the user interface remains unchanged inexplicably - SWR hook in Next.js with TypeScript

Dealing with Scoping Problems in a Typescript d3 Update Tutorial

What is the process of incorporating a function into an object?

MediaRecorder is not compatible with Protractor unit tests in Angular

Issue with Http Interceptor in Angular 4: Error message - next.handle(...).do is not a valid function

Communicating Between Children Components in Angular 2

Plugin for listing contacts using Nativescript

The Microsoft.Azure.WebJobs.Script encountered an issue while attempting to cast an object of type 'System.String' to type 'Microsoft.AspNetCore.Http.HttpRequest' during the return process