Estas instrucciones aplican si su fuente de datos es de formato CSV, caso contrario pase a la siguiente actividad.
Instale globalmente csvtojson, con:
npm i -g csvtojson
Convierta el archivo CSV a JSON, con:
csvtojson <NOMBRE DEL ARCHIVO>.csv > <NOMBRE DEL ARCHIVO>.json
Cree una interfaz de Angular, con:
ng generate interface interfaces/<NOMBRE_INTERFAZ>
Coloque la interfaz generada en lugar de la interfaz creada.
Cree el servicio proveedor de datos, con:
ng generate service providers/<NOMBRE_SERVICIO>
Importe el cliente HttpClient en el servicio proveedor de datos.
import { Injectable } from '@angular/core';
//Importación del HttpClient
import { HttpClient } from '@angular/common/http';
Agregue un atributo con el URL de referencia al servicio.
...
export class <NOMBRE_SERVICIO>Service {
//Atributo URL
private URL: string = 'https://<NOMBRE_DEL_PROYECTO>.firebaseio.com/collection.json';
...
}
Inyecte el cliente HttpClient en el constructor del servicio proveedor de datos.
...
export class <NOMBRE_SERVICIO>Service {
//Atributo URL
private URL: string ...
//Inyección de dependencia del HttpClient
constructor(private http:HttpClient) { }
}
Agregue un método para hacer una petición HTTP GET.
...
export class <NOMBRE_SERVICIO>Service {
//Atributo URL
private URL: string ...
//Inyección de dependencia del HttpClient
constructor( ... ) { }
//Método con la petición HTTP
getResponse() {
return this.http.get(this.URL);
}
}
Importe el módulo HttpClientModule, la interfaz <NOMBRE_INTERFAZ> y el servicio <NOMBRE_SERVICIO>Service.
...
import { HttpClientModule } from '@angular/common/http';
//Importación de la interfaz
import { <NOMBRE_INTERFAZ> } from '<RUTA>/interfaces/<NOMBRE_INTERFAZ>';
//Importación del servicio
import { <NOMBRE_SERVICIO>Service } from '<RUTA>/providers/<NOMBRE_SERVICIO>.service'
@Component({
...
Registre el módulo HttpClientModule en la clave imports y el servicio <NOMBRE_SERVICIO>Service en la clave providers.
...
@Component({
...
standalone: true,
imports: [HttpClientModule],
providers: [<NOMBRE_SERVICIO>Service],
...
})
...
Agregue un atributo para almacenar la respuesta a la petición.
...
@Component({
...
})
export class <COMPONENTE_SELECCIONADO>Component {
//Atributo con el tipo de dato de la interfaz
public data : <NOMBRE_INTERFAZ>[] = [];
...
}
...
Inyecte la dependencia el servicio <NOMBRE_SERVICIO>Service en el constructor del componente seleccionado para mostrar los datos.
...
@Component({
...
})
export class <COMPONENTE_SELECCIONADO>Component {
public data : <NOMBRE_INTERFAZ>[] ...
//Inyección de dependencia del servicio
constructor(private dataProvider: <NOMBRE_SERVICIO>Service) { }
}
...
Agregue un método que realice la petición y que se suscriba a la respuesta de la petición. Extraiga una muestra de los datos en el atributo a renderizar en la vista.
...
@Component({
...
})
export class <COMPONENTE_SELECCIONADO>Component {
public data : <NOMBRE_INTERFAZ>[] ...
constructor( ... ) { }
//Ejecución de la petición y suscripción de la respuesta
ngOnInit() {
this.dataProvider.getResponse().subscribe((response) => {
let dataArray = (response as <NOMBRE_INTERFAZ>[]);
this.data = dataArray.slice(0,10);
})
}
}
...
Utilice la directiva *ngFor para recorrer el arreglo data en la vista (html) del componente seleccionado. Las CLAVE1, CLAVE2 y CLAVE3 corresponden a las claves en la interfaz.
...
<!-- Tabla con datos -->
<table>
<tbody>
@for (datum of data; track datum.id) {
<tr>
<th> {{ datum[ <CLAVE1> ] }} </th>
<td> {{ datum[ <CLAVE2> ] }} </td>
<td> {{ datum[ <CLAVE3> ] }} </td>
</tr>
} @empty {
<tr>
<td colspan="4" class="text-center">Aún no hay datos</td>
</tr>
}
</tbody>
</table>
...
Using AI to improve app development 🚀
— Firebase (@Firebase) December 1, 2023
Two AI announcements from Firebase Demo Day:
1️⃣ We started building Duet AI for Firebase, a helpful assistant for developers.
2️⃣ We're bringing AI-powered automated testing to App Distribution.
Get the details → https://t.co/4TmBtZ1v8o pic.twitter.com/6tnhfay0Rc
csvtojson, firebase, interfaz, servicio, httpclient, inyección de dependencias, proveedor, directivas