Don't fetch the right data format through http request

Question

I am working with Angular 8 for a web app. So I have a backend in which I have implemented some get http call. They all should return an array of objects.

My array of object has an interface of this type:

export interface MssInterface {
  operatingroom: number;
  sessionid: number;
  specialty: number;
  day: number;
}

I have created a mssService.ts to put all the GET together (in the environment.backendURL variable there is the first part of the address: http://localhost4200)

export class MssService {
  mssURL = environment.backendURL + "/api/mss";
  
  constructor(private http: HttpClient) { }

  getS1(): Observable<MssInterface> {
    return this.http.get<MssInterface>(this.mssURL + '/uno');
  }

Then I have a component class in which I am subscribing to the mssService to fetch the data. So i have written my home.component.ts like this:

export class HomeComponent implements OnInit {
  mssData: MssInterface;
  
  constructor(public mssService: MssService)

  mssToDisplayOne() {
      this.mssService.getS1().subscribe((MSS) => {
      this.mssData = MSS;
      console.log(this.mssData);
      });
  }
...
}

Here the console.log

Everything seems to work properly except that when I go to make a *ngFor inside the array of objects in the html code, it doesn’t return anything.

home.component.html :

<tr *ngFor="let item of mssData">
    
     <td *ngIf="item.sessionid %2==1"> {{item.operatingroom}} </td>
     <td *ngIf="item.sessionid %2==0"> {{item.operatingroom}} </td> 
     
   </tr>

I have tried to understand why nothing happend doing this thing :

<tr *ngFor="let item of mssData">
    
   <td>{{ item | json}}</td>
     
</tr>

And with this it displays my entire array of Objects. here the displayed object

So, what Am I doing wrong? Why it can't read inside my array of objects?

I have aready tried to do as answered in this other question (https://stackoverflow.com/questions/60593725/angular-observable-retrieve-data-using-subscribe) but seems nothing change. — Caterina, Oct 19 '22 at 15:04

Selaka Nanayakkara · Accepted Answer · 2022-11-07T18:52:14.557

1

As per your result fetched from the API it includes an attribute called session_id but when it comes to the HTML template your *ngIf it includes the condition as *ngIf="item.sessionid %2==1 which the sessionid is not equal to the data attribute being fetched from the API result. It has to be session_id try changing that attribute and check the results. Refer the below code attached:

<tr *ngFor="let item of mssData">
     <td> {{item.session_id%2==1 ? item.operatingroom : item.operatingroom}} </td>   
</tr>

edited Nov 07 '22 at 18:52

answered Nov 07 '22 at 18:43

Selaka Nanayakkara

3,296
1
22
42

Thank you, that was the issue! iI fixed it. – Caterina Nov 16 '22 at 12:02
Appreciate if you can mark it as the correct answer.. And give an upvote.. @Caterina – Selaka Nanayakkara Nov 16 '22 at 12:37
1

I cannot vote because I am still a beginner user. But I marked it as correct! Thank you so much! – Caterina Nov 22 '22 at 14:27

Diogo Castelo · Answer 2 · 2022-10-19T16:16:58.723

0

Ok so, if the your request does indeed return an array this works

mssData: MssInterface[];

constructor(public mssService: MssService) { }

ngOnInit() {
    this.mssService.getS1().subscribe((MSS: any) => {
        this.mssData = MSS;
        console.log(this.mssData);
    });
}

edited Oct 19 '22 at 16:16

answered Oct 19 '22 at 15:04

Diogo Castelo

5
2

I have checked with a console.log(this.mssData) inside the mssToDisplayOne() function and it returns an array of object as I want. The mssToDisplayOne() is called in a togheter with the other function that doing the same things with arrays that have same structure but different data. That part seem to works, the consolo.log of each function works and the array are different on the base of the select that I choose. But with the ngFor doesn't work . Also the network response with 200 status so the call is done correctly. – Caterina Oct 19 '22 at 15:09
Try declaring mssData as an array. Without full access to your code all I can do is guess, I tried running a similar project with all the information you've provided and it worked properly so my guess is that the error can be caused by other part of your code. – Diogo Castelo Oct 19 '22 at 15:16
change mssData: MssInterface; to mssData: MssInterface[]; – Diogo Castelo Oct 19 '22 at 15:25
It's always the same, I've tried with: mssData:MssInterface[], mssData:any, and mssData:MssInterface. I'm going to be clearer if I can. The main problem is that the console.log(this.mssData) return something like this: [{full},{full},{full}...]. So when I try to read inside the object with the is like if item is not the object wiith MssInterface, it's not readable. It seems there is another step to do but I don't know which is. While doing the {{item | json }} it displays only the object inside my array without the [] bracket. – Caterina Oct 19 '22 at 15:42
it displays only one object with {{item | json }} ? Have you tried to display {{item.operatingroom}} without the *ngIf to see if there's a problem with the sessionid or operatingroom parameters of the object? – Diogo Castelo Oct 19 '22 at 15:59
Yes, I tried also without the ngIf condition and doesn't display anything – Caterina Oct 20 '22 at 08:41
It seems like "item" is entirly the object inside the array, not only one object for times. Am I able to do another *ngFor to serach inside item? Because I think that item var is not defined in html and so can't be iterable. – Caterina Oct 20 '22 at 10:08

Don't fetch the right data format through http request

2 Answers2