Do I have to wait for the HTTP get request to access the fetched object property?

Question

Do I have to wait for the HTTP get request to access the fetched object property?

I am currently working with Angular and TypeScript on a dish-detail component that is accessed through 'dishes/:id'

The dish object returned has a property called components, which contains an array of objects with two properties:

id: type string
quantity: type number

I need to use the id property from components to fetch additional details from MongoDB (this functionality works on the back-end).

My issue is that I have to wait for getDish() to finish before I can execute getComponentDetails(). I have experimented with async/await, .then in ngOnInit and getDish(), as well as including logic like trackBy and if-else statements in the component's HTML file.

I am struggling to find a solution. Please refer to the comments in the code provided below.

Below is the content of dish-detail.component.ts:

export class DishDetailComponent implements OnInit{
  dish: Dish | undefined;
  id: string | undefined;
  component: any | undefined;
  components: any | undefined;
  currentComponent: any | undefined;
  componentDetails: [] = [];

  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private dishService: DishService,
    private componentService: ComponentService,
  ) {}

  ngOnInit() {
    this.id = String(this.route.snapshot.paramMap.get('_id'));
    this.getDish();
    // executing getComponentDetails() here yields undefined error - dish not loaded yet
  }

  getDish(): void {
    this.dishService.getDishById(this.id!)
      .subscribe(dish => this.dish = dish);
    // executing getComponentDetails() here yields undefined error - dish not loaded yet
  }

  getComponentDetails(): void {
    console.log("in getComponentDetails...");
    this.dish!.components.forEach(function (value) {
      console.log(value.componentId);
    // here I will fetch component from ID and subscribe to variable
    // similar to getDish()
    })
  }

Here is the HTML content in dish-detail.component.html:

<div *ngIf="dish" class="mt-4">
  <div class="card">
    <div class="card-header">
      <h2>{{ dish.name | uppercase }} Details</h2>
    </div>

    <div class="card-body">
      <div class="mb-3">
        <label for="total-cost" class="form-label">Total Cost:</label>
        <span>{{ dish.totalCost }}</span>
      </div>

      <div class="mb-3">
        <label for="dish-name" class="form-label">Dish Name:</label>
        <input id="dish-name" [(ngModel)]="dish.name" class="form-control" placeholder="Name">
      </div>

      <div class="mb-3">
        <h3>Components:</h3>
        <div class="mb3" *ngFor="let component of dish.components">
          <div class="card" *ngIf="component">
            <p>test</p>
            <div class="card-body" class="mb-3">
              <h5 class="card-title">Id:{{ component.componentId }}</h5>
              <!-- here I would like to get properties from the component of id component.componentId,
              lets call it componentDetails-->
              <!-- like componentDetails.name -->
              <div class="card-text">
                <p>Quantity: {{ component.componentQuantity }}</p>
                <!-- other properties like componentDetails.price -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="d-flex justify-content-between">
        <a class="btn btn-warning" (click)="goBack()">Go Back</a>
        <a class="btn btn-primary" (click)="updateDish()">Update</a>
        <a class="btn btn-danger" (click)="deleteDish()">Delete</a>
      </div>
    </div>

    <div class="card-footer">
      <small class="text-muted">
        <p><b>Dish ID:</b> {{ dish._id }}
        <p><b>Created @</b> {{ dish.createdAt | date:'medium' }}</p>
        <p><b>Updated @</b> {{ dish.updatedAt | date:'medium' }}</p>
      </small>
    </div>
  </div>
</div>

I am looking for guidance on how to fetch data based on a property only after it has been fully loaded. How can I "pause" execution until then? Should I consider a different approach altogether?

angular typescript

Answer 1

Answer №1

Is there a way to retrieve data based on a specific property after it has been loaded?

To achieve this, you can create an observable stream from the source to your template model and then utilize the async pipe to subscribe in the template while also handling unsubscribe operations.

How can I handle "waiting" time?

Instead of waiting, you can create an imperative stream that processes the id and maps it to the view model by fetching values from observables via HTTPS requests.

Should I consider a different approach?

I advise against using nested subscribes as an alternative approach.

Stackblitz

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { of, delay, switchMap, forkJoin, map } from 'rxjs';

/** Mock services with delays */
const dishService = {
  getDishById(id: string) {
    return of({
      name: 'Very expensive caviar',
      totalCost: 1_000_000,
      components: [
        {
          id: 'jufbvjh',
        },
        {
          id: 'woehfjb',
        },
      ],
    }).pipe(delay(1000));
  },
};
const componentService = {
  getComponentById(id: string) {
    return of({
      componentId: id,
      componentQuantity: Math.random(),
    }).pipe(delay(1000));
  },
};

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <ng-container *ngIf="vm$ | async as vm">
     <pre>{{ vm | json }}</pre>
    </ng-container>
  `,
})
export class App {
  name = 'Angular';

  vm$ = dishService.getDishById('jbvhbfr').pipe(
    switchMap((dish) =>
      forkJoin(
        dish.components.map((c) => componentService.getComponentById(c.id))
      ).pipe(
        map((componentInfo) => ({
          ...dish,
          components: [...componentInfo],
        }))
      )
    )
  );
}

bootstrapApplication(App);

Answer 2

Is there a way to retrieve data based on a specific property after it has been loaded?

To achieve this, you can create an observable stream from the source to your template model and then utilize the async pipe to subscribe in the template while also handling unsubscribe operations.

How can I handle "waiting" time?

Instead of waiting, you can create an imperative stream that processes the id and maps it to the view model by fetching values from observables via HTTPS requests.

Should I consider a different approach?

I advise against using nested subscribes as an alternative approach.

Stackblitz

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { of, delay, switchMap, forkJoin, map } from 'rxjs';

/** Mock services with delays */
const dishService = {
  getDishById(id: string) {
    return of({
      name: 'Very expensive caviar',
      totalCost: 1_000_000,
      components: [
        {
          id: 'jufbvjh',
        },
        {
          id: 'woehfjb',
        },
      ],
    }).pipe(delay(1000));
  },
};
const componentService = {
  getComponentById(id: string) {
    return of({
      componentId: id,
      componentQuantity: Math.random(),
    }).pipe(delay(1000));
  },
};

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <ng-container *ngIf="vm$ | async as vm">
     <pre>{{ vm | json }}</pre>
    </ng-container>
  `,
})
export class App {
  name = 'Angular';

  vm$ = dishService.getDishById('jbvhbfr').pipe(
    switchMap((dish) =>
      forkJoin(
        dish.components.map((c) => componentService.getComponentById(c.id))
      ).pipe(
        map((componentInfo) => ({
          ...dish,
          components: [...componentInfo],
        }))
      )
    )
  );
}

bootstrapApplication(App);

Do I have to wait for the HTTP get request to access the fetched object property?

Answer №1

Stackblitz

Similar questions

How can I create a universal "Add" button in Angular that can be used across all child components?

Angular: accessing public properties

The default value for the logged in user in Angular 7 is set to null when

The issue of declaration merging and complications with nested node_modules

Refresh the context whenever the state object changes

What is the most efficient way to find the sum of duplicates in an array based on two different properties and then return the

Transitioning an NX environment to integrate ESM

`Drizzle ORM and its versatile approach to SELECT statements`

Error in Typescript: The type 'string' cannot be assigned to the type '"allName" | `allName.${number}.nestedArray`' within the react hook form

`ng-apexcharts` causing unit test failures

Subscribing to Observables in Angular Services: How Using them with ngOnChanges Can Trigger Excessive Callbacks

Is there a way to customize the Color Palette in Material UI using Typescript?

What method is the easiest for incorporating vue.js typings into a preexisting TypeScript file?

Installing and running Node.js within a tomcat server

Incorporating an Angular Application into an Established MVC Project

Tips for changing the name of a directory in an Angular 6 application

Having trouble with TypeScript Library/SDK after installing my custom package, as the types are not being recognized

Allow for an optional second parameter in Typescript type definition

What is the substitute for <center> tag in AngularJS?

Minimize the cyclomatic complexity of a TypeScript function