Categorias
iiiiii
consumir archivo json
Descripcion
consumir un archivo json de ionic
Nota
<ion-header>
<ion-toolbar>
<ion-title>inicio</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let c of componentes | async" [routerLink]="c.redirecto"> <!---Se le addciona | async para consumir el servicio-->
<ion-icon slot="start" [name]="c.icon"></ion-icon>
{{c.name}}
</ion-item>
</ion-list>
</ion-content>
html
/**********************************************************************************************
1. En los directorios assets se crea un archivo en la ruta /assets/data-app/menu-options.json con el siguiente JSON
[
{"name":"action-sheet","icon":"logo-react","redirecto":"/action-sheet"},
{"name":"alert","icon":"alert-circle-outline","redirecto":"/alert"},
{"name":"avatar","icon":"alert-circle-outline","redirecto":"/avatar"},
{"name":"botones","icon":"alert-circle-outline","redirecto":"/botones"},
{"name":"cards","icon":"card-outline","redirecto":"/card"},
{"name":"check","icon":"checkmark-circle","redirecto":"/check"},
{"name":"date-time","icon":"calendar","redirecto":"/date-time"},
{"name":"fab","icon":"car","redirecto":"/fab"},
{"name":"grid","icon":"grid","redirecto":"/grid"},
{"name":"infinite","icon":"infinite","redirecto":"/infinite"},
{"name":"inputs","icon":"enter-outline","redirecto":"/imputs"},
{"name":"list","icon":"list","redirecto":"/list"},
{"name":"list-reorder","icon":"list","redirecto":"/list-reorder"},
{"name":"loading","icon":"reload-circle-outline","redirecto":"/loading"}
]
*/
/****************************************************************************************************************************************
2. se crea una nueva interface en la ruta app/interface/interface.js con la siguiente informacion (Se debe exportar para ser usada)
export interface componentes {
'name':string;
'icon':string;
'redirecto':string;
}
*/
/***************************************************************************************************************************
Se crea un servicio INICIO HOJA DE SERVICIO*/
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; /*Se debe importar para consumir servicios*/
import { componentes } from '../interfaces/interfaces';/*Se importa el servicio que se creo*/
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http:HttpClient) { }
getMenu(){
return this.http.get<componentes[]>('/assets/data-app/menu-options.json'); /*Se le dice de que tipo de dato va recibir. de tipo componentes un arreglo*/
}
}
/*Se crea un servicio FIN HOJA DE SERVICIO*/
/*****************************************************************INICIO inicio.ts***********************************************************************
3.
*/
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { componentes } from 'src/app/interfaces/interfaces'; /*Se importa la interface que se creo*/
import { DataService } from 'src/app/services/data.service'; /*Se importa el servicio que se creo*/
@Component({
selector: 'app-inicio',
templateUrl: './inicio.page.html',
styleUrls: ['./inicio.page.scss'],
})
export class InicioPage implements OnInit {
componentes!: Observable<componentes[]>; /*Se espesifica que es un Observable de tipo componentes array*/
constructor(private myservices:DataService) { }
ngOnInit() {
this.componentes = this.myservices.getMenu(); /*Se guarda el puntero del servicio en la variable componentes*/
}
}