Ionic 2 + Cakephp 2.X Rest

Question

How to parse data in json next? I’ve tried using the promise and the observable.

{
    "diaries": [
        {
            "Diary": {
                "id": "1",
                "user_id": "1",
                "title": "T\u00edtulo da agenda",
                "description": "Descri\u00e7\u00e3o da agenda ",
                "is_active": true,
                "created": "2017-05-20 04:29:41",
                "modified": "2017-05-20 04:29:41"
            },
            "User": {
                "id": "1",
                "firstName": "admin",
                "lastName": "administrador",
                "email": "[email protected]",
                "password": "admin123",
                "group_id": "1",
                "created": "2017-05-20 04:00:52",
                "modified": "2017-05-20 04:00:52",
                "is_active": true
            }
        }]
}

In cakephp the function that returns the data is below:

public function index(){
    $this->response->header('Access-Control-Allow-Origin', '*');

    $this->Diary->recursive = 0;
    //$this->set('_jsonOptions', false);
    $diaries = $this->Diary->find('all', array('conditions' => array(
                "Diary.is_active" => 1
            ), 'recursive' => '-1'));

    $this->set(array(
            'diaries' ,
            '_serialize' => array('diaries')
        ));
    $this->set('diaries', $this->Paginator->paginate());
}

And below the code of Ionic:

DiaryPage:

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import { Diary } from '../../models/diary';
import { DiaryService } from './diary.service';
@Component({

    selector: 'diary',
    templateUrl: './diary.html'
})
export class DiaryPage implements OnInit{

    public diaries: any;

    constructor( public navCtrl: NavController, public diaryService: DiaryService, private http: Http){}

    ngOnInit(){ 
        this.diaryService.load()
        .then(data => {
            this.diaries = data;
            console.log(this.diaries);
          });

    }


 }

DiaryService:

import { Component } from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';


import { Diary } from '../../models/diary';
@Injectable()
export class DiaryService { 

    public headers: Headers;
    public uriGet: string = "http://http://localhost/cakephp/diaries.json";
    diaries= new Diary;

    constructor(private http: Http){
        this.headers= new Headers();
        this.headers.append('Content-Type','application/json');
    }

    public getData(): Promise<Diary []> {
    return this.http.get('http://localhost/cakephp/diaries.json')
           .toPromise()
           .then(response => response.json().diaries as Diary[]);
  }


  load() {
      if (this.diaries) {
        // already loaded diaries
        return Promise.resolve(this.diaries);
      }

      // don't have the data yet
      return new Promise(resolve => {
        // We're using Angular HTTP provider to request the diaries,
        // then on the response, it'll map the JSON data to a parsed JS object.
        // Next, we process the data and resolve the promise with the new data.
        this.http.get('http://localhost/cakephp/diaries.json')
          .map(res => res.json())
          .subscribe(data => {
            // we've got back the raw data, now generate the core schedule data
            // and save the data for later reference
            this.diaries = data;
            resolve(this.diaries);
          });
      });
    }


}