Ionicハイブリッドアプリケーションでリスト内のデータを取得する方法

Question

私はIonicハイブリッド開発で初心者です。私のプロジェクトでList内のデータを解析したいと思います。 私はこのウェブサービスを使用しています：http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=bertt。私はList.This内のすべての日付を表示したい が

{ "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 }]}

JSON Responceでその本当に私を助けてチュートリアルを提案したり、いくつかのコードを投稿してください。事前

Answer 1

まずにおける おかげで、あなたはセカンド地震-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()); 
    } 

} 

データプロバイダを必要とする、あなたはhome.ts

、例えばあなたの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); 
    }); 
    } 

} 

最後に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を使用すると、日付と時刻を解析、検証、操作、表示することができます