angular is not displaying any values inside object array

Question

Issue: angular for loop is not displaying values on line {{ item.Id }}. If you look at screenshot below, it is geting the correct length 10 but no values.

Debug: on line console.log(this.person); is displaying following data in web broswer; which is correct data. I think issue could be with mapping?

Font-end: here I am displaying values

{{ person.length }} <br/>
{{ person}}

<table class='table table-striped'>
  <thead>
    <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of person;">
      <td>{{ item.Id }}</td>
      <td>{{ item.First_Name }}</td>
      <td>{{ item.Last_Name }}</td>
    </tr>
  </tbody>
</table>

Component

export class MyComponent implements OnInit {
  public person: Person[] = [];

  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {

  }//end of constructor

  ngOnInit(): void {
    this.http.get<Person[]>('person').subscribe(result => {
      this.person= result;
      console.log(this.person);
    }, error => console.error(error));
  }// end of init()

}// end of class

interface Person{
  Id: number;
  First_Name: string;
  Last_Name: string;
}

Check the browser DevTools, network tab, does the request receive the response? If yes, what is the response? Can share the response to the question? Thanks. — Yong Shun
– Yong Shun, Commented Feb 5, 2023 at 5:04
I'm trying to figure it out, but i can't, If i were you, I would try to use postman, just to be sure, that data Is retrieving from server. If it does... maybe It just can map result to your person array — Red Star
– Red Star, Commented Feb 5, 2023 at 6:37
From the screenshot it is unclear if the table has 10 empty data rows or no data rows at all. If it has empty rows, then the problem probably is discrepancies in property naming (compare id in JSON and Id in Person interface) — Kane Shynin
– Kane Shynin, Commented Feb 5, 2023 at 21:48

Rakesh · Accepted Answer · 2023-02-05 08:47:14Z

1

As you already mentioned you are new to angular, I would recommend you few other things as well. 1. Call api in ngOnInit rather than in constructor. 2.Try to learn reactive style coding and bind your ui with async pipe. Now coming to your problem I would have done couple of thigs to check this. 1) See network tab to see the response 2) Put console.log(result) ins subscribe to see the exact name of the properties of person. 3) In your c# code you are putting attribute Display on properties, which is different from the property name you given in the ui side. If your api is inytegrated with swagger then check the response there or use postman to see response and the see if binding is correct or not.

answered Feb 5, 2023 at 8:47

Rakesh

113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dave Over a year ago

thanks, yes I will have to do training and more research on angular as I am still not sure why it can't display a simple object array.

dave · Accepted Answer · 2023-02-05 21:58:14Z

1

@KaneShynin - thank you turn out you are right. issue was the uppcase variables inside interface

I changed this

interface Person{
  Id: number;
  First_Name: string;
  Last_Name: string;
}

to

interface Person{
  id: number;
  first_Name: string;
  last_Name: string;
}

answered Feb 5, 2023 at 21:58

dave

20015 bronze badges

Collectives™ on Stack Overflow

angular is not displaying any values inside object array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related