Encountering a delay in receiving server data causing errors in Angular 2

Question

Encountering a delay in receiving server data causing errors in Angular 2

Within the service class constructor, I make an http call to the server to fetch product category data and store it in the productCategories array. However, when I try to retrieve the productCategories array in the ngInit() function of my component, I encounter an error stating that the array is undefined.

It seems that the service constructor is making the call to the server and returning before the product category data is actually fetched. So, when the component requests the data using the getCategory(x, y) method of the service, the server call initiated in the constructor is still in progress, resulting in the productCategories array being declared as undefined. Eventually, the server call completes and the productCategories array is logged to the console.

How can I solve this issue?

@Injectable()
export class ProductCategoryService {
  private productCategories: ProductCategory[];
  private categoriesUrl = "/api/product/categories";

  constructor(private http: Http) { 
    console.log('ProductCategory.constructor() called');
    this.getProductCategoriesDb();
  }

  private getProductCategoriesDb() {
    console.log('ProductCategory.getCategories() called');

    this.http.get(this.categoriesUrl)
      .toPromise()
      .then((response: Response) => {
        this.productCategories = response.json();
        console.log('this.productCategories = ' + 
JSON.stringify(this.productCategories));
      })
      .catch(this.handleError);
  }

  public getProductCategory(name, type) {
    return this.productCategories
      .filter(category => (category.name == name && category.type == type))[0];
  }
}

Component:

export class ProductCategoryComponent implements OnInit {
  category: string;
  type: string;
  productCategory: ProductCategory = new ProductCategory();

  constructor(private route: ActivatedRoute, private productCategoryService: 
ProductCategoryService) { }

 ngOnInit() {
    this.route.params.subscribe(params => {
      this.category = params["category"];
      this.type = params["type"];

      console.log("category = " + this.category)
      console.log("type = " + this.type)


      this.productCategory = 
this.productCategoryService.getProductCategory(this.category, this.type);
      console.log("productCategory = " + this.productCategory);

    })  
  }

}

Sequence of logged statements:

ProductCategory.constructor() called ---- product-category.service.ts:27

ProductCategory.getCategories() called ---- product-category.component.ts:23

Error: productCategories array undefined:

ProductCategoryComponent_Host.html:1 ERROR TypeError: Cannot read property 'filter' of undefined at ProductCategoryService.webpackJsonp.../../../../../src/app/product-category/product-category.service.ts.ProductCategoryService.getProductCategory (product-category.service.ts:39) at SafeSubscriber._next (product-category.component.ts:27) at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrSetError (

Finally, the productCategories array is printed --- product-category.service.ts:33

this.productCategories = [{"_id":"599c5d93f36d286317108ffd","name":"Furniture","type":"Living Room","image":[{"label":"Living Room","name":"LivingRoom1.jpg"},{"label":"Sofas","name":"LivingRoom2.jpg"},{"label":"Sleeper","name":"LivingRoom3.jpg"},{"label":"Loveseats","name":"LivingRoom4.jpg"},{"label":"Chairs","name":"LivingRoom5.jpg"},{"label":"Ottomans","name":"LivingRoom6.jpg"},{"label":"Chaisers","name":"LivingRoom7.jpg"},{"label":"Recliners","name":"LivingRoom8.jpg"},{"label":"Sectionals","name":"LivingRoom9.jpg"},{"label":"Occasional Tables","name":"LivingRoom10.jpg"}],"items":["Sofas","Sleepers","Loveseats","Chairs","Ottomans","Chaises","Recliners","Sectionals","Occasional Tables"]}]

angular typescript

Answer 1

Answer №1

To solve the issue, it's best to rework the code rather than attempting to patch it. Your understanding of why the error is occurring is accurate, but you may want to consider a different method for handling data from the server.

This initial solution can be refined through continued iterations.

@Injectable()
export class ProductCategoryService {
  productCategoriesSbj: ReplaySubject<ProductCategory[]> = new ReplaySubject();
  private categoriesUrl = "/api/product/categories";

  constructor(private http: Http) { 
  }

  getProductCategoriesDb(): Observable<ProductCategory[]> {
    return this.http.get(this.categoriesUrl)
      .subscribe(response => this.productCategoriesSbj.next(response.json()))
      .catch(this.handleError);
  }

  getProductCategory(categories: ProductCategory[], name: string, type: string) {
    return categories.filter(category =>
        (category.name == name && category.type == type)
    )[0];
  }
}

Then, in your component:

export class ProductCategoryComponent implements OnInit, OnDestroy {

  category: string;

  type: string;

  productCategory: ProductCategory = new ProductCategory();

  productCategorySub: Subscription = new Subscription();

  constructor(private route: ActivatedRoute,
              private productCategoryService: ProductCategoryService){
  }

 ngOnInit() {
    this.route.params.subscribe(params => {
      this.category = params["category"] || '';
      this.type = params["type"] || '';

      this.productCategoryService.getProductCategoriesDb();
      productCategorySub = this.productCategoryService
          .productCategoriesSbj
          .subscribe(categories => {
              // now categories contain parsed response from the server
              this.productCategory = this.productCategoryService
                  .getProductCategory(categories, this.category, this.type);
          });
    })  
  }
}

 ngOnDestroy() {
     // unsubscribe from observable to avoid memory leaks
     this.productCategorySub.unsubscribe();
 }

Offered without many details, but I trust it will provide some assistance.

Answer 2

To solve the issue, it's best to rework the code rather than attempting to patch it. Your understanding of why the error is occurring is accurate, but you may want to consider a different method for handling data from the server.

This initial solution can be refined through continued iterations.

@Injectable()
export class ProductCategoryService {
  productCategoriesSbj: ReplaySubject<ProductCategory[]> = new ReplaySubject();
  private categoriesUrl = "/api/product/categories";

  constructor(private http: Http) { 
  }

  getProductCategoriesDb(): Observable<ProductCategory[]> {
    return this.http.get(this.categoriesUrl)
      .subscribe(response => this.productCategoriesSbj.next(response.json()))
      .catch(this.handleError);
  }

  getProductCategory(categories: ProductCategory[], name: string, type: string) {
    return categories.filter(category =>
        (category.name == name && category.type == type)
    )[0];
  }
}

Then, in your component:

export class ProductCategoryComponent implements OnInit, OnDestroy {

  category: string;

  type: string;

  productCategory: ProductCategory = new ProductCategory();

  productCategorySub: Subscription = new Subscription();

  constructor(private route: ActivatedRoute,
              private productCategoryService: ProductCategoryService){
  }

 ngOnInit() {
    this.route.params.subscribe(params => {
      this.category = params["category"] || '';
      this.type = params["type"] || '';

      this.productCategoryService.getProductCategoriesDb();
      productCategorySub = this.productCategoryService
          .productCategoriesSbj
          .subscribe(categories => {
              // now categories contain parsed response from the server
              this.productCategory = this.productCategoryService
                  .getProductCategory(categories, this.category, this.type);
          });
    })  
  }
}

 ngOnDestroy() {
     // unsubscribe from observable to avoid memory leaks
     this.productCategorySub.unsubscribe();
 }

Offered without many details, but I trust it will provide some assistance.

Encountering a delay in receiving server data causing errors in Angular 2

Answer №1

Similar questions

Develop a reusable input component in Angular

When variables are destroyed

Associating function parameters with object types in TypeScript

Pattern Matching for Excluding Multiple Specific Phrases

Converting javascript html object lowercase

Personalized prefix for Angular and WebStorm components

Disable dates that are more than 7 days from the current date using Material UI's Date

angular table disabled based on condition

How to manage Angular production site redirection

Creating one-to-one relationships in sequelize-typescript can be achieved by setting up multiple foreign keys

Creating a numeric sequence based on the date of a corresponding transaction - a step-by-step guide

Getting a TypeError following the execution of 'npm update' and 'ng build -prod' commands

Unable to organize the data associated with a specific column in the header within an Angular material Table

Jasmine's await function often leads to variables remaining undefined

Tips for effectively crafting a component capable of managing both a value and an observable for that specific value

What's the best way to provide route access to the same menu for two distinct user roles using AuthGuard within Angular?

Angular APP_INITIALIZER Function Redirects Prematurely Prior to Completion of Observable List

Dynamically access nested objects by utilizing an array of strings as a pathway

Is it possible for an app's feature module to access routing configurations from another lazily loaded module in Angular routing?

Align the running of Angular code with a for loop