Trying to get data from service into component.ts

Question

I am trying to just get data from the service and put it into my component.ts file. I have the service subscribe to the http get and it returns the data but after i try to get the data in the component. I just don't know how to go about it not trying to get the data until its done doing the call in the service.

I'm not sure if I'm just doing the pipe wrong or if i should be subscribing. Nothing I've looked up is really helping.

In the console I get the pipe error and then after the error it outputs the observable from the service.

My SearchService.ts

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Row } from "../../app/row";
import { Observable } from "rxjs";
import { of } from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class SearchServiceService {

  players: Observable<Row[]>;

  constructor(private http: HttpClient) { }

  getPlayers(searchTerm: String): Observable<Row[]>{
    let ROOT_URL =
    "http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code='mlb'&active_sw='Y'&name_part='" +
   searchTerm +
    "%25'";
    this.http.get<Row[]>(ROOT_URL).subscribe(data => {
      let res = data["search_player_all"];
      let query = res["queryResults"];
      let row = query["row"];
      if (row != null) {
        this.players = row;
        console.log(this.players);
        return this.players;
      }
    });
    return this.players;
  }
}

AppComponent.ts

import { Component } from "@angular/core";
import { Row } from "../app/row";
import { Observable } from "rxjs";
import { map } from 'rxjs/operators';
import { SearchServiceService } from "../app/services/search-service.service"

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  players: Row[];
  value = "";
  buttonClicked = false;
  numReturned = -1;
  searchTerm = "";
  constructor(private searchService: SearchServiceService) {}

  getData() {
    if (this.value != "") {
      this.searchTerm = this.value;

      this.searchService.getPlayers(this.searchTerm).pipe(map(data => {
        if(data == null) {
          console.log('IS NULL');
        }
        else {
          console.log('in service');
          this.players = data;
          console.log(this.players);
          this.buttonClicked = true;
        }
      }));

      if(this.players == null) {
        console.log('null');
        this.numReturned = -1;
      }

    }
  }

Answer 1

Try to return just the http.get like this:

getPlayers(searchTerm: String): Observable<Row[]>{
    return this.http.get<Row[]>(ROOT_URL);
}

Also in your code this.players is not an Observable it is a plain data that your api returned.

So instead of this:

this.searchService.getPlayers(this.searchTerm).pipe(map(

Just subscribe:

this.searchService.getPlayers(this.searchTerm).subscribe((data: any) => { <process your data here> });