I saw many similar questions but the solutions there didn't work for me. I want to display orders in Angular.
I receive clients' orders in Json format from Spring. Like this:
[
{
"id": 1,
"orderProducts": [],
"numberOfProducts": 0
},
{
"id": 2,
"orderProducts": [
{
"quantity": 4,
"product": {
"id": 1,
"brand": "apple",
"name": "iphone11",
"categoryId": 1
}
}
],
"numberOfProducts": 1
},
{
"id": 3,
"orderProducts": [
{
"quantity": 9,
"product": {
"id": 1,
"brand": "apple",
"name": "iphone11",
"categoryId": 1
}
},
{
"quantity": 6,
"product": {
"id": 2,
"brand": "xiaomi",
"name": "Note10",
"categoryId": 1
}
},
{
"quantity": 1,
"product": {
"id": 6,
"brand": "cccccccccccccccc",
"name": "cccccccccccccc",
"categoryId": 1
}
}
],
"numberOfProducts": 3
},
{
"id": 4,
"orderProducts": [
{
"quantity": 5,
"product": {
"id": 1,
"brand": "apple",
"name": "iphone11",
"categoryId": 1
}
}
],
"numberOfProducts": 1
}
]
So i created a class in Angular to accept it.
db-orders.ts
export class DbOrders {
id: number;
orders: ProductOrder[];
numberOfProducts: number;
constructor(orders: ProductOrder[]){
this.orders = orders;
}
}
product-order.ts
export class ProductOrder {
product: Product;
quantity: number;
constructor(product: Product, quantity: number){
this.product = product;
this.quantity = quantity;
}
}
product.ts
export class Product {
id: number;
brand: string;
name: string;
category: ProductCategory;
constructor(){}
}
Here is a service class.
order.service.ts
export class OrderService {
private orderUrl: string = 'http://localhost:8080/orders';
constructor(private http: HttpClient) { }
saveOrder(order: ProductOrders) {
console.log("Hello")
return this.http.post<ProductOrders>(this.orderUrl, order);
}
public findOrders(): Observable<DbOrders[]> {
return this.http.get<DbOrders[]>(this.orderUrl);
}
}
order-list.component.ts
export class OrderListComponent implements OnInit {
receivedOrders: DbOrders[] = [];
constructor(private orderService: OrderService) { }
ngOnInit(): void {
this.orderService.findOrders().subscribe(
data =>{
this.receivedOrders = data;
}
);
}
}
order-list.component.html
<div *ngFor="let receivedOrder of receivedOrders">
<p>Number of Products in the order: {{receivedOrder.numberOfProducts}}</p>
<div *ngFor="let order of receivedOrder.orders">
<h1>Product name: {{ order.product.name }}</h1>
</div>
</div>
In this case, only the number of products is displayed,nothing else:
I tried to add a toArray method:
<div *ngFor="let order of toArray(receivedOrder.orders)">
ngOnInit(): void {
this.orderService.findOrders().subscribe(
data =>{
this.receivedOrders = data;
}
);
}
toArray(orders: object) {
return Object.keys(orders).map(key => orders[key])
}
Doesn't work.
Also i tried to add indexes.
<div *ngFor="let receivedOrder of receivedOrders; let i=index"">
<p>Number of Products in the order: {{receivedOrder.numberOfProducts}}</p>
<div *ngFor="let order of receivedOrder.orders; let j=index"">
<h1>Product name: {{ order.product.name }}</h1>
</div>
</div>
Doesn't work either.
What is my mistake? Thank you!
