Angular 2 Get request not displaying first time

Question

I'm trying to populate Pie charts with information I get from a get request.

This is my service that does the get request to get a list of information

import { Injectable } from '@angular/core';
import { BaThemeConfigProvider, colorHelper } from '../../../theme';
import { NodeService } from '../nodes.service';
@Injectable()
export class NodeService {
  constructor (
   private http: Http,
   ) {}

    getNodes() {
    return this.http.get(`http://localhost:5000/nodes`)
    .map((res: Response) => res.json());
    }

  }

And the following loads the information from that service and uses it to populate my pie charts

import { Injectable } from '@angular/core';
import { BaThemeConfigProvider, colorHelper } from '../../../theme';
import { NodeService } from '../nodes.service';


@Injectable()
export class PieChartService {

  constructor(private _baConfig: BaThemeConfigProvider, private nodeService: NodeService) {
  }
  profile = [];
  getData() {
    const pieColor = this._baConfig.get().colors.custom.dashboardPieChart;
    this.nodeService.getNodes().subscribe(data => this.profile = data,
      // tslint:disable-next-line:no-unnecessary-callback-wrapper
      error => alert(error),
     () => console.log('Finished with get request'),
     );
    const nodes = this.profile;
    const returnObject = [];
    const buildJsonObject = '';
    console.log('here', this.profile);
    for (const node of nodes) {
     const single_node = node;
     const buildJsonObject = '{ color: pieColor, description:' + single_node + '}';

     console.log(node);
     console.log(buildJsonObject);
     returnObject.push({ color: pieColor, description: single_node });
    }
    console.log('Final Object', returnObject);

    return returnObject;
  }
}

So the problem I'm having is that the first get request gets sent but it does not populate my charts but after the second request it gets populated with the first get requests information.

I am using a python server.