ионный 3 угловой 5 запрос рестап не работает

Question

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

это мой код

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.log(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

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

Answer 1

В вашем коде многократная проблема

1. Ваши данные поступают как { success : { data : array} }, поэтому для доступа к данным вам нужно сделать ниже

  private extractData(res: any) {
    if (res && res.success && res.success.data) {
      return res.success.data;
    }
    return [];
  }

2.В своем html вынеобходимо получить доступ к таким свойствам, как это

  <ion-item *ngFor="let n of names">
    <h2>{{n?.strat_name}}</h2>
  </ion-item>

3. Ваши данные слишком велики и приводят к большим задержкам при отображении данных

После всех этих исправлений это будет выглядеть ниже

https://stackblitz.com/edit/ionic-jb6ni9