Angular 5: Issues with retrieving response using HttpClient's get request

Question

Angular 5: Issues with retrieving response using HttpClient's get request

Alright, so typically I work with Angular 1.*, but I decided to dive into Angular 5 and man, it's been a bit of a challenge. It feels unnecessarily complex, but oh well...

So I'm trying to make an HTTP call, and I have this node API that is returning data like this:

apiRoutes.route('/api/code').get(function (req, res) {
...
res.json({status: 200, code: FOO})
});

Now let's take a look at what's happening in Angular 5:

 this.http.get(WEB_CONFIG.API_DOMAIN + 'api/code').subscribe(res => {
            console.log(res) //<----- no error
            console.log(res.code) //<---- Property 'code' does not exist on type 'Object' (WTF)
          });

Why am I unable to access any properties of 'res' during compile time (at least according to VS Code)??? I can clearly see the JSON data for 'res' in the console if I remove the second log statement and run the application...

angular typescript compiler-errors angular5

Answer 1

Answer №1

Returning a value is often recommended, but it is not mandatory. Instead, you have the option to utilize any.

This example demonstrates how to retrieve data from an API using Angular's HttpClient module:
this.http.get(WEB_CONFIG.API_DOMAIN + 'api/code').subscribe((res: any) => {
      console.log(res.code);
    });

Answer 2

Returning a value is often recommended, but it is not mandatory. Instead, you have the option to utilize any.

This example demonstrates how to retrieve data from an API using Angular's HttpClient module:
this.http.get(WEB_CONFIG.API_DOMAIN + 'api/code').subscribe((res: any) => {
      console.log(res.code);
    });

Answer 3

Answer №2

Well, it turns out I had to solve my own dilemma. It seems that due to type validation or similar reasons, I had to follow these steps:

1.) Create an interface for my API by using Angular CLI command: ng g interface apiConfig.

2.) Customize the interface to ensure its properties align with the data returned from the API endpoint:

export interface ApiConfig {
status: Number,
code: String
}

3.) Import this interface into my component:

import { ApiConfig } from '../api-config';

4.) Implement this structure in my 'HTTPClient' request:

gCode: ApiConfig

//......... Other stuff........//

this.http.get<ApiConfig>(WEB_CONFIG.API_DOMAIN + 'api/code')
    .subscribe(data => {
      this.gCode = {
        ...data //<----- Yes this peculiar ellipsis syntax is indeed correct
      };
});

I suppose I'm just not accustomed to all this rigorous type validation in JavaScript....

Answer 4

Well, it turns out I had to solve my own dilemma. It seems that due to type validation or similar reasons, I had to follow these steps:

1.) Create an interface for my API by using Angular CLI command: ng g interface apiConfig.

2.) Customize the interface to ensure its properties align with the data returned from the API endpoint:

export interface ApiConfig {
status: Number,
code: String
}

3.) Import this interface into my component:

import { ApiConfig } from '../api-config';

4.) Implement this structure in my 'HTTPClient' request:

gCode: ApiConfig

//......... Other stuff........//

this.http.get<ApiConfig>(WEB_CONFIG.API_DOMAIN + 'api/code')
    .subscribe(data => {
      this.gCode = {
        ...data //<----- Yes this peculiar ellipsis syntax is indeed correct
      };
});

I suppose I'm just not accustomed to all this rigorous type validation in JavaScript....

Angular 5: Issues with retrieving response using HttpClient's get request

Answer №1

Answer №2

Similar questions

Having trouble displaying nested routes in Angular within the view

The HttpClient.get('/') request with {observe: 'response'} is failing to retrieve some headers

Developed using esbuild, this Angular application outputs to the browser directory

Press the second form submit button after the completion of another Observable

Event emission is not working in the Ionic directive

Jest does not support the processing of import statements in typescript

Just recently updated to Angular 14 and I'm encountering a problem with images not loading from the assets folder. I'm wondering if there is a configuration step I missed. Could someone please

Navigating to the main directory in Angular 2

Can you explain the variances between the two Pick<T,K> util type implementations?

Chakra UI - The "Open Modal" button is disabled from being clicked repeatedly

Guide to importing a function from a Javascript module without declaration

Remix is throwing a Hydration Error while trying to process data mapping

Using Promise.all for multiple function calls

The table is failing to display the values contained within the array

Unable to circumvent the Angular sanitize security measures

What are some effective techniques for handling asynchronous operations while utilizing [displayWith] in an autocomplete

Strategies for passing multiple props to a function in React using TypeScript, such as useState([]) and useState(boolean)

TypeORM is failing to create a table upon initialization

Angular9 integrated with Firebase to enhance the capabilities of

Error in NextJS with TypeScript when updating data in a useState variable