Subscribed Array doesn't update after called in ngOnIt. Angular

I have an array of objects called Hobby. I am able to set the array of objects when the component first loads. But whenever I go to update that array of objects, I can't.

This is my component that lists an array of Hobbies. Hobby-View-Component. When I ever I make a call to the service component the hobbies[] array never gets updated thus returning a null value in my console.log method.

      export class HobbyViewComponent implements OnInit {
  hobbyRoomObj = HobbyRoomObj;
  hobbiesRooms: HobbyRoomObj[];
  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message);
    this.getHobbies();
  }

  getHobbies()
  {
    console.log("hit2");
    this.data.getHobbiesById().subscribe(data => this.hobbiesRooms = data);
    //console.log(this.hobbiesRooms.length.toString());
  }

The url is called and makes valid requests in this Service class next. I know what is being returned works. As mentioned before, this method works in ngOnIt.

export class MasterHobbydata {
private messageSource = new BehaviorSubject<string>("1");
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
    this.hobbyListByIdUrl += message;
  }

  //Returns a full list of current hobbies hosted
  getHobbiesById(): Observable<HobbyRoomObj[]> {
    console.log(this.hobbyListByIdUrl);
    return this.http.get<HobbyRoomObj[]>(this.hobbyListByIdUrl)
      .pipe(map((response) => {
        return response;
      }
      )).pipe(catchError(this.handleError('getHobbiesById', []))
      );
  }

This next component uses a onClick() method to tell the previous component to update. hbv is of type Hobby-View-Component.

export class HobbiesComponent implements OnInit {


  onSelect(hobby: hobbyObj): void {
    this.selectedHobby = hobby;
    this.masterhobbydata.changeMessage(this.selectedHobby.HobbyName);
    this.hbv.getHobbies();
  }

I hope that i focused on the problem correctly here.

This is my html for the Hobby-View-Component:

<ul>
  <li *ngFor="let hobby of hobbiesRooms">
      <span class="badge">{{hobby.hname}}</span>
  </li>
</ul>
<p>
  Message: {{message}}
</p>

//////////~~~~~~~!!!! huzzah !!!!~~~~~~~\\\\\\\\\\\\

Updated the Service class by creating a subject of type HobbyRoomObj[] and creating an observable variable. Also, using the Subject method next, I added the requested json object to the Subject of HobbyRooms[].

export class MasterHobbydata {

  private hobbies = new Subject<HobbyRoomObj[]>();
  newHobbies = this.hobbies.asObservable();

  //Returns a full list of current hobbies hosted
  getHobbiesById(): Observable<HobbyRoomObj[]> {

    console.log(this.hobbyListByIdUrl);
    return this.http.get<HobbyRoomObj[]>(this.hobbyListByIdUrl)
      .pipe(map((response) => {
        this.hobbies.next(response);
        return response;
      }
      )).pipe(catchError(this.handleError('getHobbiesById', []))
      );
  }

}

In Hobby-View-Component.ts I subscribed to the newHobbies Observable of the Service Component inside ngOnInIt. Then whenever I click on a new hobby, I subscribe the GetHobbiesById and update the list.

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message);
    console.log("hit2");
    this.data.newHobbies.subscribe(
      data => {this.hobbiesRooms = data;
      });
  }

  getHobbies()
  {

    this.data.getHobbiesById().subscribe(
      data => {this.hobbiesRooms = data;
      console.log(this.hobbiesRooms);
      });
  }

I guess my only curiosity is why I am subscribing twice. Am I correct in thinking that I'm subscribing to the hobbyroomobj[] and then subscribing to the method gethobbiesbyId()?