Ionic framework 离子混合应用中如何获取列表中的数据

我是离子混合开发的初学者。我想在我的项目中解析列表中的数据。 我正在使用此Web服务：。 我想显示列表中的所有日期。这是json Responce

{
“地震”：[
{
“日期时间”：“2011-03-1104:46:23”，
“深度”：24.4，
“液化天然气”：142.369，
“src”：“美国”，
“eqid”：“c0001xgp”，
“震级”：8.8，
“lat”：38.322
},
{
“日期时间”：“2012-04-11 06:38:37”，
“深度”：22.9，
“液化天然气”：93.0632，
“src”：“美国”，
“eqid”：“c000905e”，
“震级”：8.6，
“lat”：2.311
},
{
“日期时间”：“2007-09-1209:10:26”，
“深度”：30，
“液化天然气”：101.3815，
“src”：“美国”，
“eqid”：“2007hear”，
“震级”：8.4，
“lat”：-4.5172
}]}

请建议教程或张贴一些代码，它真的帮助我。

---

提前感谢

首先，您需要数据提供商地震提供商。ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EarthquakesProvider {

  constructor(public _http: Http) {
    console.log('Hello Earthquakes Provider');
  }

  loadEarthquakes(){
    return this._http.get('http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=bertt')
      .map(res => res.json());
  }

}

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes-provider';

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

  public DateList: Array<Object>;

  constructor(public _navCtrl: NavController,
              public _earthquakes: EarthquakesProvider ) {

       this.getEarthquakes();

  }

  getEarthquakes(){
     this._earthquakes.loadEarthquakes().subscribe(res => {
     this.DateList = res.earthquakes;
     console.log(res.earthquakes);
    });
  }

}

第二，您需要一个页面来显示JSON数据，例如在home.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EarthquakesProvider {

  constructor(public _http: Http) {
    console.log('Hello Earthquakes Provider');
  }

  loadEarthquakes(){
    return this._http.get('http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=bertt')
      .map(res => res.json());
  }

}

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes-provider';

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

  public DateList: Array<Object>;

  constructor(public _navCtrl: NavController,
              public _earthquakes: EarthquakesProvider ) {

       this.getEarthquakes();

  }

  getEarthquakes(){
     this._earthquakes.loadEarthquakes().subscribe(res => {
     this.DateList = res.earthquakes;
     console.log(res.earthquakes);
    });
  }

}

从'@angular/core'导入{Component}；
从'ionic angular'导入{NavController}；
从“../../providers/Seventures provider”导入{EarthquakesProvider}；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'，
提供者：[地震提供者]
})
导出类主页{
公共日期列表：数组；
构造函数（公共_navCtrl:NavController，
公共地震：地震供应商）{
这个；
}
GetSequences（）{
这是._sequences.loadSequences（）.subscribe（res=>{
this.DateList=res.地震；
控制台记录（地震记录）；
});
}
}

最后是home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Show dates in List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="content-background">

<ion-list>
  <button ion-item *ngFor="let item of DateList">
    {{ item.datetime }}
  </button>  
</ion-list>

</ion-content>

在列表中显示日期
{{item.datetime}

另外，您可以使用来解析、验证、操作和显示日期和时间

sir我收到这个错误“error:No provider for Http！”@Tomislav Stankovic