Angular 2 - Return of Observable

Question

I have problem with my Observable in my service. I need to fetch data for 3 players. My subscription sign data from service to local variable and push it into array. Fine, but when i return data from if statement i have bug. I can see only one of 3 players. How can i store all data for whole life time of my app? Regards.

Service:

  getData(query): Observable<any> {
if(this.dataFromDb)
{
  return Observable.of(this.dataFromDb);
}

    return this.http.get(query)
      .map(res => res.json())
      .do(res => this.dataFromDb = res)
      .catch(err => Observable.throw(err.json() || 'Błąd');
  }
}

Component:

export class FriendsComponent implements OnInit {


  myDataFromDb: any[] = [];
  constructor(public dataService: DataService) {
}
private getDataFromDb(query) {
    this.dataService.getData(query).subscribe((data) =>
    {
     this.myDataFromDb.push(data);
     console.log(data);
    });
  }
  ngOnInit() {

for (let i of this.dataService.friends) {
    this.dataService.query = `${this.dataService.apiUrl}${i.nick}${this.dataService.apikey}`;

    this.getDataFromDb(this.dataService.query);

  }
    console.log(this.myDataFromDb);
    }
}

And some photo of problem: Data on start

Data after route change.

Eliseo · Accepted Answer · 2018-02-05 00:51:12Z

2

You must use a object to "cache" the response. Personally I'll choose send to my function the nick and the apiKey, but as you send query, you can do

dataFromDb:any={};
getData(query): Observable<any> {
if(this.dataFromDb[query])
{
  return Observable.of(this.dataFromDb[query]);
}

    return this.http.get(query)
      .map(res => res.json())
      .do(res => this.dataFromDb[query] = res)
      .catch(err => Observable.throw(err.json() || 'Błąd');
  }
}

answered Feb 5, 2018 at 0:51

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NoLimes Over a year ago

Huge mug of beer for this man! Many people tried to help me but your answer was correct.

Collectives™ on Stack Overflow

Angular 2 - Return of Observable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related