Angular component unable to retrieve array data from Angular service

Question

Angular component unable to retrieve array data from Angular service

I've developed an Angular service that serves as a middleman for fetching data from a database. Here's the code:

export class WebService {
constructor(private http: Http, private datePipe: DatePipe) {
    this.getStatsbyDate(this.datePipe.transform(new Date(), 'dd-MM-yyyy'));
}
statsModel = {
    date: this.datePipe.transform(new Date(), 'dd-MM-yyyy'),
    answeringMachine:0,
    hangUp: 0,
    conversations: 0
};
getStatsbyDate(date) {
    this.http.get(this.BASE_URL + '/stats/' + date)
      .subscribe(
        res => {
            this.btnsOnResponse = true; 
            this.statsModel = res.json(); 
            // console.log(this.statsModel);                              
        },
        err => {
            console.log("Couldn't fetch data")
        }
    );
}

In one of my Angular components, I'm attempting to access the retrieved data like so

export class FusionChartsComponent implements OnInit {
  constructor(private webService: WebService) {}
  ngOnInit() {
     console.log(this.webService.statsModel.answeringMachine);
  }
}

I'm perplexed by this behavior and seeking advice on resolving it.

angular typescript

Answer 1

Answer №1

To implement the changes outlined in the documentation provided at the following link: https://angular.io/guide/http, it is recommended to move the subscribe function to the component. By doing so, you can easily add any necessary code within the subscribe block.

fetchStatsByDate(date) {
    this.http.get(this.BASE_URL + '/stats/' + date)
      .pipe(
        tap(res => {
            this.responseReceived = true; 
            this.statsData = res.json();                            
        }),
        catchError(err => console.log("Failed to fetch data"))
    );
}

export class FusionChartsComponent implements OnInit {
  constructor(private webService: WebService) {}
  ngOnInit() {
     this.webService.fetchStatsByDate().subscribe(
         data => {
             console.log(data);
             console.log(this.webService.statsModel.machineStatus);
     });
  }
}

EDIT

If you require the service to maintain its data for sharing across different components, consider implementing the following approach:

@Injectable()
export class MovieService {
    private moviesUrl = 'api/movies';
    private movies: IMovie[];

    constructor(private http: HttpClient) { }

    getMovies(): Observable<IMovie[]> {
        if (this.movies) {
            return of(this.movies);
        }
        return this.http.get<IMovie[]>(this.moviesUrl)
                        .pipe(
                            tap(data => console.log(JSON.stringify(data))),
                            tap(data => this.movies = data),
                            catchError(this.handleError)
                        );
    }
}

Each component can then subscribe to the service like this:

this.movieService.getMovies().subscribe(
    (movies: IMovie[]) => this.movies = movies,
    (error: any) => this.errorMessage = <any>error
);

The initial call to the service will trigger an HTTP request to retrieve the data, which is then stored privately. Subsequent calls will receive the already fetched data without additional requests.

Subscribing close to the UI element is considered a "best practice" by most developers as it ensures that the code within the subscribe block only executes when the required data is available.

An example demonstrating this concept can be found here: https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4

Answer 2

To implement the changes outlined in the documentation provided at the following link: https://angular.io/guide/http, it is recommended to move the subscribe function to the component. By doing so, you can easily add any necessary code within the subscribe block.

fetchStatsByDate(date) {
    this.http.get(this.BASE_URL + '/stats/' + date)
      .pipe(
        tap(res => {
            this.responseReceived = true; 
            this.statsData = res.json();                            
        }),
        catchError(err => console.log("Failed to fetch data"))
    );
}

export class FusionChartsComponent implements OnInit {
  constructor(private webService: WebService) {}
  ngOnInit() {
     this.webService.fetchStatsByDate().subscribe(
         data => {
             console.log(data);
             console.log(this.webService.statsModel.machineStatus);
     });
  }
}

EDIT

If you require the service to maintain its data for sharing across different components, consider implementing the following approach:

@Injectable()
export class MovieService {
    private moviesUrl = 'api/movies';
    private movies: IMovie[];

    constructor(private http: HttpClient) { }

    getMovies(): Observable<IMovie[]> {
        if (this.movies) {
            return of(this.movies);
        }
        return this.http.get<IMovie[]>(this.moviesUrl)
                        .pipe(
                            tap(data => console.log(JSON.stringify(data))),
                            tap(data => this.movies = data),
                            catchError(this.handleError)
                        );
    }
}

Each component can then subscribe to the service like this:

this.movieService.getMovies().subscribe(
    (movies: IMovie[]) => this.movies = movies,
    (error: any) => this.errorMessage = <any>error
);

The initial call to the service will trigger an HTTP request to retrieve the data, which is then stored privately. Subsequent calls will receive the already fetched data without additional requests.

Subscribing close to the UI element is considered a "best practice" by most developers as it ensures that the code within the subscribe block only executes when the required data is available.

An example demonstrating this concept can be found here: https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4

Angular component unable to retrieve array data from Angular service

Answer №1

Similar questions

The Angular 7 Router seems determined to lead me straight to the 404 error page

Exploring the Magic of Angular 2 in Visual Studio 2015

The type of JSX element attribute `[...]` cannot be a combination of multiple types

How can you retrieve the keys of an object that conforms to an interface?

How can I integrate React-Router Link as a component within Material-UI using Typescript?

Oops! Your file couldn't make it to Firebase Storage in Angular

Ways to identify scroll occurrences within a mat-sidenav-container

Adding local images to Excel can be easily accomplished using Office Scripts

Can we limit the return type of arrow function parameters in TypeScript?

Whenever I am building a React application, I encounter a bug that states: "node:fs:1380 const result = binding.mkdir()"

Exploring Facebook Graph API response with Angular 2 Mapping

Uploading Multiple Files to a REST API Using Angular 6's Reactive Form

Convert JSON data to an array using Observable

The Angular Material Table Collapse feature offers dynamic collapsing similar to jQuery Datatable

Angular 10: A Guide to Utilizing RouterModule

Error message 2339 - The property 'toggleExpand' is not recognized on the specified type 'AccHeaderContextProps | undefined'

Make sure to implement validations prior to sending back the observable in Angular

The module "vue-final-modal" does not have an exported member named 'ModalsContainer'

How can I stop TypeScript from causing my builds to fail in Next.js?

Tips for transferring JSON information from a perl script to an angular controller on a local level