I cant acess stored(fetched before) data in angular service

Question

So, I probably don't understand Observables well. I have snippet like this, and would like to access todos stored in this service via function (from another component) defined in service. Unfortunately, I have no idea how to do this.

todos;
// fetching todos from api
fetchTodos() :Observable<Todo[]>{
    return this.http.get<Todo[]>(api_url);
}

 constructor(private http:HttpClient) {
    this.fetchTodos()
    .subscribe(data => this.todos = data)

}

it's never a good practice to load data in your constructor. Try implementing the `onInit` interface and adding your code in the `ngOnInit` function — Nicolas, Nov 23 '19 at 20:38
still nope, this propably needs async get function or a tricky way — coffeble, Nov 23 '19 at 20:48
No, async function are only used with `await`. In your case, you are dealing with observable, so it's not necessary. — Nicolas, Nov 23 '19 at 20:52
Can you check if there is any request being sent, in your chrome dev tool ( f12, network tab ) — Nicolas, Nov 23 '19 at 20:53
yeah, fetch is working, but of course when i want to access todos value via component it returns undefined. thats the point — coffeble, Nov 23 '19 at 21:00
Are you trying to access them before, or after the observable has resolved. — Nicolas, Nov 23 '19 at 21:03
before cuz i get undefined in return, i would discover a way to access it after data fetching is done. — coffeble, Nov 23 '19 at 21:09
seems like a duplicate of... https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular — AT82, Nov 24 '19 at 11:12

score 0 · Accepted Answer · 2019-11-25T07:14:15.237

To do it right solve your problem as follows.

SERVICE

import { BehaviorSubject, Observable } from 'rxjs';

/* make the plain object a subject you can subscribe to */
todos: BehaviorSubject<Todo[]> = new BehaviorSubject<Todo[]>([]);

constructor(private http:HttpClient) {
    /* get the data and put it in the subject */
    /* every subscriber to this event will be updated */
    this.fetchTodos().subscribe(data => this.todos.next(data));
}

getTodos(): Observable<Todo[]> {
    return this.todos.asObservable();
}

// fetching todos from api
private fetchTodos(): Observable<Todo[]> {
    return this.http.get<Todo[]>(api_url);
}

COMPONENT

constructor(private service: Service) {}

ngOnInit(): void {

    /* here you go. this subscription gives you the current content of todos[] */
    /* whenever it gets updated */
    this.service.getTodos().subscribe(data => {
        console.log(data);
    });
}

PLEASE NOTE

Subscriptions to an Observable should always be finished when you leave a component. The best way to reach this goal in your case is:

modified COMPONENT

import { Subscription } from 'rxjs';

private subscription: Subscription = new Subscription();

constructor(private service: Service) {}

ngOnInit(): void {

    /* add each subscriber to the subscription  */
    this.subscription.add( 
        this.service.getTodos().subscribe(data => {
            console.log(data);
        });
    );
}

ngOnDestroy(): void {
    /* unsubscribe all subscribers at once */
    this.subscription.unsubscribe();
}

I cant acess stored(fetched before) data in angular service

1 Answers1