Ionic 3 angular 5 запрос рестапи не работает

Я пытаюсь получить данные из API, но не могу распечатать значения в приложении. неправильно читает json. не уверен, что я сделал не так .. любая помощь будет полезна. Мне нужно иметь возможность анализировать в json, чтобы получить strat_name

это мой код

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestApiProvider } from '../../providers/restapi/restapi';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    names: string[];
    errorMessage: string;
    descending: boolean = false;
    order: number;
    column: string = 'name';

    constructor(public navCtrl: NavController, public rest: RestApiProvider) { }

    ionViewDidLoad() {
        this.getNames();
    }

    getNames() {
        this.rest.getNames()
            .subscribe(
                names => this.names = names,
                error =>  this.errorMessage = <any>error
            );
    }


    sort() {
        this.descending = !this.descending;
        this.order = this.descending ? 1 : -1;
    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Name List
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-searchbar [(ngModel)] = "terms"></ion-searchbar>
  <button ion-button type = "button" (click) = "sort()">Sort</button>
    <h1>{{names | json}}</h1>
  <ion-item *ngFor = "let c of names | search : terms | sort: {property: column, order: order}">
    <h2>{{c.strat_name}}</h2>
  </ion-item>
</ion-content>

restapi:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class RestApiProvider {

    private apiUrl = 'https://macrostrat.org/api/v2/defs/strat_names?all';

    constructor(public http: HttpClient) {
        console.info(this.apiUrl);
    }

    getNames(): Observable<string[]> {
        return this.http.get(this.apiUrl).pipe(
            map(this.extractData),
            catchError(this.handleError)
        );
    }

    private extractData(res: Response) {
        let body = res;
        return body || {};
    }

    private handleError (error: Response | any) {
        let errMsg: string;
        if (error instanceof Response) {
            const err = error || '';
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

}

не уверен, что я сделал не так .. любая помощь будет полезна. Мне нужно иметь возможность анализировать json, чтобы получить strat_names.

сначала он загружает json

как только я нажимаю на поиск