Scribd
Cargar
102 vistas5 páginas

IONIC - Llamada HTTP Por El Método GET para Llenar Una Lista

Este documento describe cómo realizar una llamada HTTP GET para recuperar datos JSON de una URL y mostrarlos en una lista en una aplicación móvil de Ionic. Primero se importa el módulo HttpClient en app.module.ts y se agrega a imports. Luego se importa HttpClient en home.page.ts y se usa en el constructor para realizar una llamada GET a una URL. Los datos recuperados se asignan a una variable que se usa en home.page.html para generar dinámicamente una lista con los registros usando *ngFor.

Cargado por

martin ramos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
102 vistas5 páginas

IONIC - Llamada HTTP Por El Método GET para Llenar Una Lista

Este documento describe cómo realizar una llamada HTTP GET para recuperar datos JSON de una URL y mostrarlos en una lista en una aplicación móvil de Ionic. Primero se importa el módulo HttpClient en app.module.ts y se agrega a imports. Luego se importa HttpClient en home.page.ts y se usa en el constructor para realizar una llamada GET a una URL. Los datos recuperados se asignan a una variable que se usa en home.page.html para generar dinámicamente una lista con los registros usando *ngFor.

Cargado por

martin ramos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

IONIC - Llamada http por el método GET para

llenar una lista.

La siguiente aplicación móvil para realizar una llamada a una URL


para traerse datos en formato JSON y mostrarlos en una lista, use
de botones, uso del componente ion-list y y <ion-item *ngFor="let
registro of registros" > para generar la lista de registros, así como
la interacción entre el HTML y Java TypeScript para poder realizar
estas operaciones, mostrando el uso de las variables y funciones.

Paso 1.

Imporat el HttpClientModule encontrado en el archivo [Link]

import { HttpClientModule } from '@angular/common/http';


Entonces pon la siguientes entradas en la seccion del
archivo [Link] file.

imports: [ HttpClientModule ]
El modulo HttpClientModule es el que provee la interfaz para poder realizar
llamadas HTTP . por eso es importante que se importe este archivo en
el [Link] para evitar errores.

Paso 2.

No olvides agrear este import tambien en el archivo [Link] file y su


clase correspondiente.

import { HttpClient } from '@angular/common/http';


y en el constructor la variable para hacer las llamadas http por GET y POST.

constructor(public http: HttpClient){}


Interfaz Gráfica [Link]

<ion-header>
<ion-toolbar>
<ion-title>
Listado
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div class="ion-padding">
<ion-list>
<ion-list-header color="tertiary">
<ion-label>Registros</ion-label>
</ion-list-header>
<ion-item *ngFor="let registro of registros" >
<ion-label>
<h3>{{[Link]}}</h3>
<p>{{[Link]}}</p>
<p>{{[Link]}}</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
Código fuente [Link]

import { Component } from '@angular/core';


import { HttpClient } from '@angular/common/http';
import { createUrlResolverWithoutPackagePrefix } from '@angular/compiler';

@Component({
selector: 'app-home',
templateUrl: '[Link]',
styleUrls: ['[Link]'],
})
export class HomePage {
registros = [];
constructor(public http: HttpClient) {
// alert('Prueba=' + [Link]());
[Link]();
}
cargar() {
const uri = '[Link]

[Link](uri).subscribe(data => {
//process the json data
//alert('Datos' + [Link][0].Name);
[Link] = data['records'];
[Link](data);
});

// tslint:disable-next-line:no-trailing-whitespace

}
}
Código fuente [Link]
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';


import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './[Link]';


import { AppRoutingModule } from './[Link]';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, [Link](), AppRoutingModule, HttpCli
entModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Sube aquí tu reporte en formato PDF para facilitar su revisión con
el código fuente utilizado y las pantallas de salida de tu
aplicación móvil.

También podría gustarte