CODEWITHSUNDEEP
angular
Halil
Halil

Reputation: 45

Angular List does not show data

I am trying to make a CRUD app with Angular and Spring Boot. I tried to create a customer list. But after the GET request list is still empty.

enter image description here

customer.service.ts:

export class CustomerService {

  formData  : Customer;
  list : Customer[];
  readonly rootURL ='http://localhost:8085/api/auth'

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  constructor(private http : HttpClient) { }

  showList():Observable<Customer[]>{
    return this.http.get<Customer[]>(this.rootURL+'/customer', 
        {headers : new HttpHeaders({ 'Content-Type': 'application/json' })})
    .pipe(catchError(this.handleError))
  }

}

customer-list.component.ts

export class CustomerListComponent implements OnInit {

  constructor(
    public httpClientService:CustomerService,
  ) { }

  customer : Customer[] = [];

  ngOnInit() {
    this.httpClientService.showList().subscribe((data: Customer[])=>{
      console.log(data);
      this.customer = data;
    }) 
  }

  populateForm(customer:Customer){
    this.httpClientService.formData=Object.assign({}, customer);
  }

}

customer-list.component.html

<tr *ngFor="let cus of httpClientService.list">
      <td (click)="populateForm(cus)">{{cus.id}}</td>
      <td (click)="populateForm(cus)">{{cus.firstname}} {{cus.lastname}}</td>
      <td (click)="populateForm(cus)">{{cus.email}}</td>
      <td><button (click)="onDelete(cus.id)" class="btn btn-sm btn-outline-danger">X</button></td>
   enter image description here</tr>

Upvotes: 0

Views: 517

Answers (2)

Halil
Halil

Reputation: 45

I found the cause of my problem. When I make a GET request I was getting object but I need to get array of objects instead of object. I found the answer for this in Stack Overflow. As for solution, I used map operator to extract the data array.

the answer given by ConnorsFan

Upvotes: 0

Florian Goebel
Florian Goebel

Reputation: 441

It seems, that you have two different lists in your project.

Inside of your customer-list.component.html try to iterate over your local customer list, like this:

<tr *ngFor="let cus of customer">
      <td (click)="populateForm(cus)">{{cus.id}}</td>
      <td (click)="populateForm(cus)">{{cus.firstname}} {{cus.lastname}}</td>
      <td (click)="populateForm(cus)">{{cus.email}}</td>
      <td><button (click)="onDelete(cus.id)" class="btn btn-sm btn-outline-danger">X</button></td>
   enter image description here</tr>

Upvotes: 1

Related Questions