Angular: PHP's JSON return as Undefined

I have a component calling a service that uses an API in PHP to access a table in a MySQL database and return the information in JSON format.

HTML correctly displays the information in the table with 'ngFor', but I am not able to use it in component routines, because it is like 'undefined'. p>

When I run a console.log(this.objetivos) , it is indicating "undefined" and the Angular does not allow me to iterate.

When I tried to JSON.parse , the message

  

SyntaxError: Unexpected token in JSON at position 0

Component:

import { Component, OnInit } from '@angular/core';

import { ObjetivosService } from './objetivos.service';

@Component({
  selector: 'app-objetivos',
  templateUrl: './objetivos.component.html',
  styleUrls: ['./objetivos.component.css']
})
export class ObjetivosComponent implements OnInit {

  objetivos;

  objetivosJ;

  constructor(private objetivosService: ObjetivosService) { }

  ngOnInit() {

    this.getObjetivos();

  }

  getObjetivos() {

    this.objetivosService.getObjetivos().subscribe(objetivos => { this.objetivos = objetivos });

    console.log(this.objetivos);

    this.objetivosJ = JSON.parse(this.objetivos);

    console.log(this.objetivosJ);

  }

}

Service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class ObjetivosService {

  //private data;

  //getData: string;

  constructor(private http: HttpClient) { }

  getObjetivos() {

    return this.http.get("API/objetivos.php");

  }

}

HTML:

<h2>
  Meus Objetivos
</h2>
<div class="collection">
  <a href="#!" class="collection-item"
     *ngFor="let objetivo of objetivos"
     [routerLink]="['/objetivo', objetivo.idobjetivo]">
    ID-Objetivo {{ objetivo.idobjetivo }} Data {{ objetivo.dataobjetivo }} Objetivo {{ objetivo.objetivo }}
  </a>
</div>