我是Ionic混合开发的初学者。我想在我的项目中解析List中的数据。 我正在使用这个网络服务:http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=bertt。 我想在List中显示所有日期。这是json Responce
{
"earthquakes": [
{
"datetime": "2011-03-11 04:46:23",
"depth": 24.4,
"lng": 142.369,
"src": "us",
"eqid": "c0001xgp",
"magnitude": 8.8,
"lat": 38.322
},
{
"datetime": "2012-04-11 06:38:37",
"depth": 22.9,
"lng": 93.0632,
"src": "us",
"eqid": "c000905e",
"magnitude": 8.6,
"lat": 2.311
},
{
"datetime": "2007-09-12 09:10:26",
"depth": 30,
"lng": 101.3815,
"src": "us",
"eqid": "2007hear",
"magnitude": 8.4,
"lat": -4.5172
}]}
请建议教程或发布一些真正帮助我的代码。 提前致谢
答案 0 :(得分:1)
首先,您需要数据提供商 earthquakes-provider.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());
}
}
其次,您需要显示JSON数据的页面,例如 home.ts
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);
});
}
}
最后 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>
P.S。您可以使用MomentJS来解析,验证,操作和显示日期和时间