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](https://stackoverflow.com/questions/48098288/properly-use-async-calls-with-angular-5) — , Jan 30 '23 at 15:10

score 0 · Answer 1 · answered Jan 30 '23 at 15:42

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.

score 0 · Answer 2 · answered Jan 30 '23 at 15:57

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 '23 at 15:57

Maria

413
2
6

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. – halfer Feb 09 '23 at 21:31

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

2 Answers2