"Dealing with Angular .map() function returning an empty array or displaying error messages

Question

"Dealing with Angular .map() function returning an empty array or displaying error messages

I'm encountering two issues while attempting to display data from my API call using the following code...

API Call:

getProducts(id: number) {
    return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
      switchMap(token => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
        return this.httpClient.get(`${environment.apiUrl}products?category=${id}`, { headers, observe: 'response' });
      }),
      catchError(err => {
        console.log(err.status);
        if (err.status === 400) {
          console.log(err.error.message);
        }
        if (err.status === 401) {
          this.authService.logout();
          this.router.navigateByUrl('/login', { replaceUrl: true });
        }
        return EMPTY;
      }),
      map(res => res.body)
    );
  }

Your Code:

export class SubcategoryPage implements OnInit {
  subcategory: any = [];
  products: any = [];

  constructor(
    private route: ActivatedRoute,
    private categoriesService: CategoriesService,
  ) { }

  ngOnInit() {
    this.getSubCategory();
    this.getProducts();
  }

  // More methods and functions...

Browser Console Error:

Cannot read properties of undefined (reading 'map')

Sample API Response:

{
    // Sample API response for reference
}

What could be causing the error in your code?

javascript angular typescript ionic-framework

Answer 1

Answer №1

Ensure the API call is returning data before proceeding.

If you are getting undefined from the code, consider making a minor adjustment.

export class SubcategoryPage implements OnInit {
  subcategory: any = [];
  products: any = [];

  constructor(
    private route: ActivatedRoute,
    private categoriesService: CategoriesService,
  ) { }

  ngOnInit() {
    this.getSubCategory();
    this.getProducts();
  }

  getSubCategory() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    console.log('Selected subcategory:', id);

    this.categoriesService.getSubCategory(id).subscribe(
      data =>
        this.subcategory = data;
        console.log('Data of selected subcategory:', data);
      },
      error => {
        console.log('Error', error);
      });
  }

  getProducts() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.categoriesService.getProducts(id).subscribe(
      (data: any) => { { // <- latest change here
        console.log('List of products:', data);
        const productsData = data.products;
        this.products = productsData.map(products => {
          products.qty = 0;
          return products;
        });
      },
      error => {
        console.log('Error', error);
      });
  }

  incrementQty(index: number) {
    this.products[index].qty += 1;
  }

  decrementQty(index: number) {
    this.products[index].qty -= 1;
  }
}

Answer 2

Ensure the API call is returning data before proceeding.

If you are getting undefined from the code, consider making a minor adjustment.

export class SubcategoryPage implements OnInit {
  subcategory: any = [];
  products: any = [];

  constructor(
    private route: ActivatedRoute,
    private categoriesService: CategoriesService,
  ) { }

  ngOnInit() {
    this.getSubCategory();
    this.getProducts();
  }

  getSubCategory() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    console.log('Selected subcategory:', id);

    this.categoriesService.getSubCategory(id).subscribe(
      data =>
        this.subcategory = data;
        console.log('Data of selected subcategory:', data);
      },
      error => {
        console.log('Error', error);
      });
  }

  getProducts() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.categoriesService.getProducts(id).subscribe(
      (data: any) => { { // <- latest change here
        console.log('List of products:', data);
        const productsData = data.products;
        this.products = productsData.map(products => {
          products.qty = 0;
          return products;
        });
      },
      error => {
        console.log('Error', error);
      });
  }

  incrementQty(index: number) {
    this.products[index].qty += 1;
  }

  decrementQty(index: number) {
    this.products[index].qty -= 1;
  }
}

"Dealing with Angular .map() function returning an empty array or displaying error messages

Answer №1

Similar questions

how to use an object as a key in the groupBy function with underscore.js

Evaluate easy Ajax- Success Function

Ways to modify the text color of a dropdown button upon clicking by leveraging ViewChild and ElementRef techniques

Steps for designing a movable image

Executing Javascript code from a specified web address

How can I populate an array to use in a datatable when rendering?

Managing user sessions in Node.js

Enhance the functionality of Javascript Promise.then by allowing the argument function to accept an extra parameter

Is it possible to modify the year in the bsDatepicker to a different value?

Saving an array to a database in Concrete5

My simple application is experiencing a problem where ComponentDidMount is not being invoked

Tally the values entered into the text input field

Testing NodeJS Database Functionality using Mocha and Asserting with should.js

Adjustable div height: reduce until reaching a certain point and then begin expanding once more

Guide on conducting unit tests for the provided code in Angular 8

Troubleshooting VueJS, Electron, and Webpack integration with Hot Reload feature

Access my account on the one.com control panel using the identical login credentials

Implementing TypeScript for augmented styling properties in a component - a guide

Having trouble submitting the edit form

It appears that the Cypress test is not taking into account the mat-paginator pageSize