How to show list in Angular

Question

I want to show the list of tickets in my Angular frontend. I mean to show ticketId and place like on the picture below.

Here is my request from http://localhost:8080/api/customers

Here is the result in http://localhost:4200/customer

Unfortunately list of tickets is empty. I don't know how to show it.

Here is my class customer-details.component.html

<div *ngIf="customer">
<div>
<label>Name: </label> {{customer.name}}
</div>
<div>
<label>Surname: </label> {{customer.surname}}
</div>
<div>
<label>List of tickets: </label> {{customer.tickets}}
</div>
<span class="button is-small btn-danger"  (click)='deleteCustomer()'>Delete</span>
<hr/>
</div>

My class customers-list.component.html

<div *ngFor="let customer of customers | async" style="width: 300px;">
<customer-details [customer]='customer'></customer-details>
</div>

<div>
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete all</button>
</div>

Class customer.service.ts

export class CustomerService {

private baseUrl = 'http://localhost:8080/api/customers';

constructor(private http: HttpClient) {
}

getCustomersList(): Observable<any> {
return this.http.get(`${this.baseUrl}`);
}

My class customer.ts

export class Customer {
customerId: number;
name: string;
surname: string;
tickets: Ticket[];
}
export class Ticket {
ticketId: number;
place: number;
customerId: number;
flightId: number;
}

Class customers-list.component.ts

export class CustomersListComponent implements OnInit {

customers: Observable<Customer[]>;

constructor(private customerService: CustomerService) { }

ngOnInit() {
this.reloadData();
}

reloadData() {
this.customers = this.customerService.getCustomersList();
}
}

Ingo Bürk · Accepted Answer · 2018-12-16 16:04:03Z

1

According to the picture of the json response the property is called ticket, not tickets. So you want to either rename it (since it's clearly a misnomer) or iterate accordingly:

*ngFor="let ticket of customer.ticket"

answered Dec 16, 2018 at 16:04

Ingo Bürk

20.2k7 gold badges72 silver badges103 bronze badges

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

Comments

Johan Rin · Accepted Answer · 2018-12-16 16:04:42Z

1

In your customer-details.component.html you have to iterate on your ticket.

You can try something like this :

<div>
  <label>List of tickets: </label>
  <div *ngFor="let ticket of customer.ticket">
    {{ ticket.ticketId }}
    {{ ticket.place }}
  </div>
</div>

edited Dec 16, 2018 at 16:04

answered Dec 16, 2018 at 15:51

Johan Rin

1,9483 gold badges22 silver badges42 bronze badges

1 Comment

Viola Over a year ago

unfortunately, it's still empty

Collectives™ on Stack Overflow

How to show list in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related