Parsing of API response appears after HTML loading (adding into onNgInit does not help)

Question

I have the following code for my component:

  export class OrderDetailsComponent implements OnInit {

  orderItem: OrderItem[];

  constructor(private route: ActivatedRoute,
          private httpClient: HttpClient) { }
  
  private orderUrl = 'http://localhost:8080/api/orders';

  ngOnInit(): void {
       this.route.paramMap.subscribe(() => {
  const theOrderId: number = +this.route.snapshot.paramMap.get('id')!;

  this.httpClient
    .get(
      `${this.orderUrl}/${theOrderId}/orderItems`,
      {
        responseType: 'json',
      }
    )
    .subscribe((response: any) => {
      var responseData = response;
      responseData.forEach((array: any) => {
        this.orderItem.push({
          imageUrl: array.imageUrl,
          unitPrice: array.unitPrice,
          quantity: array.quantity,
          productId: array.productId,
          producerId: array.producerId,
        });
      });
    });
})}}

I am getting order items of my order. And want to put them into the table on my HTML:

   <table class="table table-bordered" >
                <tr>
                    <th></th>
                    <th>Price</th>
                    <th>Qty</th>
                    <th>Producer</th>
                </tr>

                <tr *ngFor="let tempOrderItem of orderItem">
                    <td>
                            {{ tempOrderItem.imageUrl }}
                    </td>
                    <td>
                        {{ tempOrderItem.unitPrice}}
                    </td>
                    <td>
                        {{ tempOrderItem.quantity}}
                    </td>
                    <td>
                        {{ tempOrderItem.producerId }}
                    </td>                  
                    
                </tr>
            </table>

But when I run the app, I am getting only the header of my table. From BE all info comes ok, e.g.:

http://localhost:8080/api/orders/3/orderItems

I was reading many questions here, I am assuming it is something related to the async,but I was trying some solutions that did not help me (I was trying to add into the html ngIf orderItems$ | async, tried to use not subscribe, but pipe(map(...).

What am I doing wrong here?

Does this answer your question? Properly use Async calls with Angular 5 — user796446
– user796446, Commented Jan 30, 2023 at 15:10

akshatdb · Accepted Answer · 2023-01-30 15:42:00Z

Angular updates the view only when it needs to, but as you are pushing the values in the array, it is still referencing the same value. Arrays, like every other object in JavaScript, are references to a point in memory unlike the primitives. So you have a couple of ways to let Angular know you need to update the view at this point. The simplest way would be to do something like this -

this.orderItem = responseData.map(array => ({
      imageUrl: array.imageUrl,
      unitPrice: array.unitPrice,
      quantity: array.quantity,
      productId: array.productId,
      producerId: array.producerId,
    });

As the map function returns a new array, this would tell Angular that something has to be updated in the view.

Another more advanced way to solve this would be to use markForCheck or detectChanges method of the ChangeDetectorRef though these are preferred when some non Default change detection strategy is used.

Maria · Accepted Answer · 2023-01-30 15:57:07Z

0

Many thanks to all answers. I found an issue. It is not an async related. In my example I had to add also:

After that the table loads Ok.

answered Jan 30, 2023 at 15:57

Maria

4413 silver badges9 bronze badges

1 Comment

halfer Over a year ago

Quick note on images of text/code: they don't work so well with screen-readers, clipboards, or search-engine robots. Please use block formatting for text, unless an image is the only way the information can be conveyed.

Collectives™ on Stack Overflow

Parsing of API response appears after HTML loading (adding into onNgInit does not help)

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related