ionic 3 angular 5 restapi request not working - json

Question

I'm trying to get data from a api but I cannot print the values in the app. doesn't read the json correctly. not sure what I did wrong..any help for would be helpful. I need to be able to parse down in the json to get the strat_name
this is my code
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);
}
}
not sure what I did wrong..any help for would be helpful. I need to be able to parse down in the json to get the strat_names.
first, it loads the json
once I click on search

Answer 1

There are multiple issue in your code
1.Your data is coming like { success : { data : array} } so to access data you need to do below
private extractData(res: any) {
if (res && res.success && res.success.data) {
return res.success.data;
}
return [];
}
2.In your html you need to access the properties like this
<ion-item *ngFor="let n of names">
<h2>{{n?.strat_name}}</h2>
</ion-item>
3.Your data is too much and cause a lot of delays to show the data
After all of that fixes it will look like below
https://stackblitz.com/edit/ionic-jb6ni9