-1

I have a simple model declared in angular as an interface.
enter image description here

I am trying to get some data by calling the Get method of the HttpClient as this: enter image description here

where the field this.plugs is an array of Plug elements.

This data I am trying to display in a table in my page as this: enter image description here

The data is not displayied. After I did some investigation in my code it seems that if I log the whole data that is returned from the HTTP call it is shown as it is supposed to be (a list of objects of type Plug) but if I try to console.log one field of a object from the array it shows up as undefined and I can't figure out why. I believe that this is the problem in my code and that's why the data is not displayied in the table.

Here is the results for console.log of the object that is returned from HTTP get call and also result for console.log after casting the result to a local variable. enter image description here

My question is why does it behave this way and what can I do to fix this?

What I tried is I have looped through the data that is returned from the HTTP GET call and foreach of them create a new objecte of type Plug and assign its ,members in order. But if I do that all the members shown up as undefined in the console.

Any help would be much appreciated!

Raducu Mihai
  • 313
  • 4
  • 14
  • Maybe show the exact response from your API? – MikeOne Aug 28 '22 at 13:52
  • Hi! I did and it shows as expected, a list of 8 objects, each of them filled according to the database that it retrieves from. I even assign the response from my API to a variable of type array of plugs. If i console.log that out it shows the exact same way (ALL GOOD). But if I try to console.log a object of the array or even a field of a object from the array, it is undefined. – Raducu Mihai Aug 28 '22 at 13:57
  • Not very helpful unfortunately. If so, you should be able to do a console.log(this.plugs[0]) in your subscribe. – MikeOne Aug 28 '22 at 14:02
  • Yes, that is exactly what I did and the result is an object with the expected properties, each filled in with the expected properties. but if i do console.log(this.plugs[0].) is undefined – Raducu Mihai Aug 28 '22 at 14:07
  • We can’t help if you don’t show the actual response. Is Plugdimensions missing by any chance? – MikeOne Aug 28 '22 at 14:11
  • I have update the questions with a printscreen from the console. – Raducu Mihai Aug 28 '22 at 14:20
  • Your response property names are in pascal case, and your interface is in camel case. Change the interface to be in pascal case, too. – R. Richards Aug 28 '22 at 15:11

3 Answers3

1

The actual problem seems to be that your backend defines the property names with capital letter, whereas you defined them in lowercase letters (countIn vs CountIn) therefore all the outputs will be undefined.

On the other hand it would be a better approach to subscribe to the observable through angulars async pipe rather than calling .subscribe manually.

I will not provide the complete corrected code, because you posted it as a screenshot that we simply can't copy.

// inside controller (The http call should be in a service for reusability)
this.plugs$ = this.http.get<Plug>(..);

// inside HTML:
<div *ngFor="let plug of plugs$ | async>
  <p>{{ plug.CountIn }}</p>
</div>

// interface
interface Plug {
  CountIn: number;
  ...
}
Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59
  • 1
    Yes, you are correct that was the issue. I also found out in the meanwhile and I have posted the solution. However I will declar your answer as the correct one. Thanks so much! – Raducu Mihai Aug 28 '22 at 15:16
0

instead of subscribing to the Observsble, you should use async pipe:

*ngFor="let plug of plugs | async"

and then in your ts file, simply:

this.plugs = this.httpClient.get<Plug[]>(this.plugsUrl);
Eli Porush
  • 1,339
  • 1
  • 7
  • 18
  • Hi! If I try to add your code in the ts file I got the error: Type '' is missing the following properties from type 'Plug[]': length,pop,push,concat and 25 more. ts(2740) – Raducu Mihai Aug 28 '22 at 14:48
  • You need to declare the `plugs` variable to be of type `Observable` – Eli Porush Aug 28 '22 at 16:12
0

Ok so the problem was that in my API I defined the model Plug and for all of its fields I used Pascal Casing. On the other hand, in Angular, I defined the model using Camel Casing, so the HTTP Get could not do the casting to my Angular Model and therefore it created new fields as Pascal Casing and filled in my object. So that's why my properties were undefined but I also got the object filled in with the correct values.

Thank you guys for your answers!

Raducu Mihai
  • 313
  • 4
  • 14