Как получить данные в списке в гибридном приложении Ionic

Я новичок в гибридной разработке Ionic. Я хочу анализировать данные в списке в своем проекте. Я использую этот веб-сервис: http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=bertt. Я хочу показать все даты в списке. Это ответ json

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

Пожалуйста, предложите учебник или опубликуйте код, который мне действительно поможет. заранее спасибо


ionic-framework hybrid-mobile-app multi-device-hybrid-apps
person Harshal Deshmukh    schedule 08.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, вам нужен поставщик данных 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 для анализа, проверки, обработки и отображения дат и времени.

person Tomislav Stankovic    schedule 08.07.2017
comment
сэр, я получаю эту ошибку Ошибка: Нет провайдера для Http! @Томислав Станкович - person Harshal Deshmukh; 10.07.2017