Using value returned from service in component Angular 4

Question

I am working on an Angular4 application where I want to access data in a component I request threw 2 services. When I execute the code in this state the service-call inside my component is not returning any data. When I tried to console.log the value of my service-call the line does not get executed at all.

So my question is, why don't I get a return value from my service function?

I tested the service and it receives the data from my GET-Request.

Can someone help me to get my data into my local variable inside my component and explain to me how it works?

I am pretty new to angular and appreciate any advice of how to improve my code.

Thanks in advance.

The component I want to access the data with

   export class ComponentA implements OnInit {
  public skills: Skill[];

  ngOnInit() {
    this.getColleagueSkills(3);
  }

  getColleagueSkills(colleague_id: number) {
    console.log('function');
    debugger;
    this.skills = this.skillService.getSkillsForColleague(colleague_id);
    console.log('after function');
  }
}

The first service I call to get the data from

@Injectable()
export class SkillsService {
  private SkillUrl = ...;
  private RatingUrl = ...;

  constructor(private http: Http, private colleagueService: ColleagueService) {
  }



getSkillsForColleague(colleague_id: number) : Skill[]{
    let ratedSkillsForColleague = [];
    let colleagueRating = [];
    let colleague: Colleague;
    this.colleagueService.getColleague(colleague_id).subscribe(
      data => { colleague = data},
      error => {},
      () => {
        colleagueRating = colleague.coll_rating;
          for ( let r in colleagueRating){
            ratedSkillsForColleague[r] = colleagueRating[r].rating_skill;
          }
          return ratedSkillsForColleague;
      }
    )
    return ratedSkillsForColleague;
  }

The service I call within the service

@Injectable()
export class ColleagueService {

  private ColleagueUrl = ...;
  constructor(private http: Http) { }


  getColleague(id: number){
    const url = `${this.ColleagueUrl}${id}`
    return this.http.get(url).map(
      response => response.json()).catch(this.handleError);
  }

Answer 1

this function:

getSkillsForColleague(colleague_id: number) : Skill[]{
    let ratedSkillsForColleague = [];
    let colleagueRating = [];
    let colleague: Colleague;
    this.colleagueService.getColleague(colleague_id).subscribe(
      data => { colleague = data},
      error => {},
      () => {
        colleagueRating = colleague.coll_rating;
          for ( let r in colleagueRating){
            ratedSkillsForColleague[r] = colleagueRating[r].rating_skill;
          }
          return ratedSkillsForColleague;
      }
    )
    return ratedSkillsForColleague;
  }

...returns and empty array because you immediately return ratedSkillsForColleague before you give getColleague a chance to return the data.

It is best to have getSkillsForColleague return an Observable or Subject and then subscribe to it to have your data returned.

getSkillsForColleague(colleague_id: number) : Subject{
    let subject = new Subject();
    let ratedSkillsForColleague = [];
    let colleagueRating = [];
    let colleague: Colleague;
    this.colleagueService.getColleague(colleague_id).subscribe(
      data => { mitarbeiter = data},
      error => {},
      () => {
        colleagueRating = colleague.coll_rating;
          for ( let r in colleagueRating){
            ratedSkillsForColleague[r] = colleagueRating[r].rating_skill;
          }
          subject.next(ratedSkillsForColleague);
      }
    )
    return subject;
  }