Ionic 3 - Ошибка преобразования данных JSON в объект, затем отображается в списке

Я создаю приложение для путешествий с использованием Ionic 3, Angular и Cordova, с целью получения информации о поездке с сайта transportAPI.com для отображения в списке.

HTML для страницы списка:

    <ion-content padding>
  <ion-list>
    <ion-item *ngFor = "let train of trainList">
      {{train.name}}
    </ion-item>
  </ion-list>
</ion-content>

Код для моей домашней страницы, home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TravelServiceProvider} from '../../providers/travel-service/travel-service';

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

  trainList = [];

  constructor(private travelService : TravelServiceProvider) {
    this.getTravel();
  }

  getTravel(){
    this.travelService.getTravel().subscribe(data => this.trainList = data);
  }
}

Мой класс провайдера выглядит следующим образом:

@Injectable()
export class TravelServiceProvider {

  private url : string = "http://transportapi.com/v3/uk/places.json?query=&type=train_station&app_id=91676f07&app_key=e10dc441385db6f855e3e5ad29bcd6c8";

  constructor(private http: Http) {
    console.log('Hello TravelServiceProvider Provider');
  }

  getTravel(){
    return this.http.get(this.url)
    .do(this.logResponse)
    .map(this.extractData)
    .catch(this.catchError)
  }

  private logResponse(res : Response){
    console.log(res);
  }

  private extractData(res : Response){
    return res.json();
  }

  private catchError(error : Response | any){
    console.log(error);
    return Observable.throw(error.json().error || "Server Error" );
  }
}

Я ожидаю, что названия поезда в JSON будут напечатаны в форме списка, выражением * ngFor в HTML, но вместо этого вместо {{train.name}} ничего не отображается, и я получаю ошибку " Ошибка при попытке разделить "объект объекта". Разрешены только массивы и итеративы ".

Любая помощь приветствуется.