title: Using Angular Observers to fetch data over a network
body: <p>I'm working on an Angular app that contains a list of (financial) Trades that a user can add to. This has been going well, and I'm trying to switch over from a static list provided by a service to trying to fetch the data from a local Node.js server. I'm using an observer to asynchronously fetch the list of trades.</p>
  
  <p>I've been following along with Angular's <a href="https://angular.io/guide/http" rel="nofollow noreferrer">HTTP tutorial</a> and the associated <a href="https://embed.plnkr.co/?show=preview" rel="nofollow noreferrer">plunker</a>. However, even though I can see the data coming from the server, I'm having trouble using the .subscribe() method to get a useful set of data out of it.</p>
  
  <p><strong>Here's my service which connects to the node server:</strong></p>
  
  <pre><code>   @Injectable()
  export class TradeService {
    private url = '...';  // URL to web API
    tradeArray: Trade[] = [];
    constructor(private http: Http) { }
    //-----------GETTERS---------------//
    getTradeObservable(): Observable&lt;Trade&gt; {
      return this.http.get(this.url)
        .map(this.extractData)
        .catch(this.handleError);
    }
  
    private extractData(res: Response) {
      let body = res.json();
      console.log("body:" + body);
      console.log("Entire Body.trades: " + body.trades);
      return body.trades;
    }
  
    getTrades(): any {
      this.getTradeObservable()
        .subscribe(
            trade =&gt; this.tradeArray.push(trade));
      return this.tradeArray;
    }
  </code></pre>
  
  <p><strong>And here are the relevant portions the node server itself:</strong> </p>
  
  <pre><code>var TRADES = { "trades": [
     {"id": 0, "cust": "Ben", "hasSub": true,
         "subcust": "Rigby", "type": "s", "security": "001", "ticket": "99"},
     ...
     {"id": 9, "cust": "Uber Bank", "hasSub": true,
              "subcust": "Lil Bank", "type": "p", "security": "456", "ticket": "56"}
  ]};
  
  
  ////////////Get Requests/////////////////
  
  //this route returns all data in JSON format
  app.get('/', function(req, res) {
      res.send(JSON.stringify(TRADES));
      });
  </code></pre>
  
  <p><strong>And the expected output from getTrades:</strong></p>
  
  <pre><code>[
     {id: 0, cust: "Ben", hasSub: true,
         subCust: "Rigby", type: "s", security: '001', ticket: '99'},
     ...
     {id: 9, cust: "Uber Bank", hasSub: true,
              subCust: "Lil' Bank", type: "p", security: '456', ticket: '56'},
  ];
  </code></pre>
  
  <p><strong>And one of the places the service is injected into and called:</strong></p>
  
  <pre><code>export class SubmittedComponent {
    constructor(private tradeService: TradeService) { }
  
    //initally show all trades
    rows = this.tradeService.getTrades();
  ...
  </code></pre>
  
  <p>I can see in the browser console that 'entire body.trades' is a full list of the data I want, but it seems subscribe is not pushing them into tradeArray, which ends up undefined. </p>
  
  <p>Thank you for your time.</p>