Failed to retrieve information from the Service for the component

Question

Failed to retrieve information from the Service for the component

My goal is to retrieve data from a service and display it in a component. Below is the code for my service:

Service.ts

export class PrjService {
  tDate: Observable<filModel[]>;
  prjData:Observable<filModel[]>;
entityUrl;
constructor(){
this.entityUrl = 'PrjDetail/GetByRep';
    this.tDate = service.get<ShipDateFilterModel[]>(this.entityUrl);
}

Below is the component where I attempt to fetch and process the data:

export class RFComponent implements OnInit {
  cachedResults: any[];
  shipToData: any;

constructor(private psService: PrjService)
{}
  ngOnInit() {
     this.psService.tDate.subscribe(x => this.cachedResults = x);
     this.filterData = [...new Set(this.cachedResults.map(item => item.cus_name))].filter(Boolean);
  }

However, when the service call is made, this.cachedResults is undefined and I encounter an error when trying to filter:

ERROR TypeError: Cannot read property 'map' of undefined

I am unsure of what I might be missing here.

javascript angular typescript angular7 angular-routing

Answer 1

Answer №1

When you make an asynchronous call, the filteredData statement may not have the cachedResults value fetched from the service yet. This can result in an undefined error.

To address this issue, ensure that the statement is executed only after the service call has been completed and data has been returned as a response.

 ngOnInit() {
     this.psService.tDate
     .subscribe(x => {
        this.cachedResults = x;
        this.filterData = [...new Set(this.cachedResults.map(item => item.cus_name))].filter(Boolean);
     });
  }

Alternatively, you can use the finally method of the Observable object.

 ngOnInit() {
        this.psService.tDate
        .finally(() => {
             this.filterData = [...new Set(this.cachedResults.map(item => item.cus_name))].filter(Boolean);
         })
        .subscribe(x => {
           this.cachedResults = x;
        });
    }

In this approach, the finally method will be called after the observable completes or encounters an error.

Answer 2

When you make an asynchronous call, the filteredData statement may not have the cachedResults value fetched from the service yet. This can result in an undefined error.

To address this issue, ensure that the statement is executed only after the service call has been completed and data has been returned as a response.

 ngOnInit() {
     this.psService.tDate
     .subscribe(x => {
        this.cachedResults = x;
        this.filterData = [...new Set(this.cachedResults.map(item => item.cus_name))].filter(Boolean);
     });
  }

Alternatively, you can use the finally method of the Observable object.

 ngOnInit() {
        this.psService.tDate
        .finally(() => {
             this.filterData = [...new Set(this.cachedResults.map(item => item.cus_name))].filter(Boolean);
         })
        .subscribe(x => {
           this.cachedResults = x;
        });
    }

In this approach, the finally method will be called after the observable completes or encounters an error.

Failed to retrieve information from the Service for the component

Answer №1

Similar questions

JavaScript function that outputs a value of 0

Attempting to render a string in React is causing an error because the type 'void | undefined' is not compatible with the type 'ReactNode'

When viewing a React data table in Chromium browsers, the columns on the right side may flicker when the screen is small or the browser

Evaluating the functionality of Express Js Server with mocha and chai

AngularJS directive failing to trigger event binding within the link function

What causes getBoundingClientRect() in Javascript to occasionally produce decimal values?

Invoking a method in Vue.js from another component

When using React, my goal is to preserve state even after the page is refreshed

Looking for assistance with ReactJs code related to implementing a filter button

What is the optimal method for sending search criteria to the server using AJAX?

Binding data to custom components in Angular allows for a more flexible

Tips for circumventing debounceTime in Angular

Is there a way to determine if a certain class link within a DIV has been clicked and then replace the DIV's click functionality?

Leveraging Angular Dragula without the need for RequireJS

Navigate to component depending on an external query parameter in Angular 2

Adjusting the size of an HTML5 canvas using a class function when a resize event occurs

Using more than one class at a time is causing issues

Using AngularJS to bind a model within ng-repeat in a custom directive

Receiving a form submission via POST method from an external source without redirection

Creating a Star Rating System Using HTML and CSS