Calling API from angular "results in undefined"

Question

am struggling to figure out, what's wrong with my code. I'm trying to call a rest API from my angular code, but it results in "TypeError: Cannot read property 'id' of undefined"

My clients.ervice.ts code looks like this:

import { Injectable } from '@angular/core';
import { Clients } from './clients.model';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class ClientsService {

  clientsUrl="http://localhost:21063/api/clints

  constructor(private http:HttpClient) { }
getAllClients():Observable<Clients[]>{
    return this.http.get<Clients[]>(this.clientsUrl);

}

My code in the client.component.ts

 constructor(private formBuilder: FormBuilder, private Service: ClientsService) { }
  clients:Clients[];
  ngOnInit() {

this.Service.getAllClients()
      .subscribe(data => this.clients=data);

and this is model.ts

export class Clients {
    id:number;
    name:string;
    phone:string;
    address:string;
    type:string;
    account:number;
    nots:string;
    branchId:number;
}

finaly my templets:

                  <tbody>
                        <tr *ngFor="let item of clients"></tr>
                        <td>{{item.id}} </td>
                        <td>{{item.name}} </td>
                        <td>{{item.phone}} </td>
                        <td>{{item.address}} </td>
                        <td>{{item.account}} </td>
                        <td>{{item.nots}} </td>

                    </tbody>

thanks in advance for any help to fix and understand this problem

Patricio Vargas · Accepted Answer · 2019-10-22 04:57:10Z

3

No problem go easy on yourself, you forgot to make the tr element wrap all the td elements

<tbody>
  <tr *ngFor="let item of clients">
      <td>{{item.id}} </td>
      <td>{{item.name}} </td>
      <td>{{item.phone}} </td>
      <td>{{item.address}} </td>
      <td>{{item.account}} </td>
      <td>{{item.nots}} </td>
  </tr>
</tbody>

edited Oct 22, 2019 at 4:57

Patricio Vargas

5,60014 gold badges57 silver badges107 bronze badges

answered Oct 22, 2019 at 4:33

Louay Al-osh

3,43721 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Calling API from angular "results in undefined"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related