Ionic 2 – Consultas a una API.


Cuando generas un nuevo proyecto con Ionic 2, se te creará toda la estructura de carpetas que una app tiene que tener. Dentro de la carpeta “app”, verás que hay dos carpetas. “theme” y “pages”.

Para consumir datos de una API necesitaremos un “Service”, por lo tanto crearemos una carpeta ahí mismo que se llame “providers”.

Dentro de “providers” crearemos otra carpeta que se llame “custom-service” y finalmente aquí crearemos el “custom-service.ts”.

Deberíamos tener la siguiente estructura:

— app
—— pages
—— theme
—— providers
——— custom-service
———— custom-service.ts

En el fichero custom-service.ts escribiremos lo siguiente.

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

@Injectable()
export class CustomService {
	
	data: any;
	url: any;
		constructor(private http: Http) {
		this.data = null;
	}
	load() {
		if (this.data) {
			// already loaded data
			return Promise.resolve(this.data);
		}

		this.url = 'https://randomuser.me/api/?results=10'

		// don't have the data yet
		return new Promise(resolve => {
			// We're using Angular HTTP provider to request the data,
			// then on the response, it'll map the JSON data to a parsed JS object.
			// Next, we process the data and resolve the promise with the new data.
			this.http.get(this.url).map(res => res.json()).subscribe(data => {
				// we've got back the raw data, now generate the core schedule data
				// and save the data for later reference
				this.data = data;
				resolve(this.data);
			});
		});
	}

}

Con esto ya tenemos nuestro servicio listo. Ahora vamos a la página de la app para consumirlo. Dentro de caulquier página de la aplicación se tiene que poner esto:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { CustomService } from '../../providers/custom-service/custom-service.ts';

@Component({
  templateUrl: 'build/pages/page2/page2.html',
  providers: [CustomService]
})
export class Page2 {
  selectedItem: any;
  icons: string[];
  items: any;
  data: any;

  constructor(public navCtrl: NavController, navParams: NavParams, public peopleService: RecetasService) {
    this.selectedItem = navParams.get('item');
    this.loadPeople();
  }

  loadPeople(){
    this.peopleService.load()
    .then(data => {
      this.items = data;
    });
   }

}

Y en el “page2.html” podemos printar los datos así:

<ion-row class="ion-row-1" *ngFor="let item of items">
  <div ion-item class="custom-card custom-card-big">
    <img src="{{item.imageURL}}" />
    <div class="cover-cards"></div>
    <ion-card-content class="card-content">
      {{item.name}}
    </ion-card-content>
  </div>
</ion-row>

Donde item.imageURL y item.name serían campos del JSON que nos devuelve la API.

You may also like

LEAVE A COMMENT