Angular ist ein weit verbreitetes JavaScript-Framework, das viele Möglichkeiten bietet, um Webanwendungen zu erstellen. In diesem Artikel werden wir uns darauf konzentrieren, wie wir eine CSV-Datei von einer API in einer Angular-Anwendung abrufen können. CSV steht für „Comma Separated Values“ und ist ein Dateiformat, das häufig für den Austausch von Tabellendaten verwendet wird.
Warum CSV?
CSV-Dateien sind einfach strukturiert und können mit vielen Anwendungen problemlos gelesen und bearbeitet werden. Oftmals sind APIs so konfiguriert, dass sie Daten im CSV-Format zurückgeben, da es eine breite Akzeptanz hat und einfach zu handhaben ist. In diesem Artikel werden wir uns darauf konzentrieren, wie wir mit Angular eine CSV-Datei von einer API abrufen können.
Voraussetzungen
Um die in diesem Artikel beschriebenen Schritte nachvollziehen zu können, benötigen Sie grundlegende Kenntnisse in Angular sowie eine funktionierende Angular-Entwicklungsumgebung.
Schritt 1: Anwendung erstellen
Zunächst müssen wir eine Angular-Anwendung erstellen. Öffnen Sie dazu Ihre bevorzugte Entwicklungsumgebung und führen Sie den folgenden Befehl aus.
ng new csv-api-abrufen
Dieser Befehl erstellt ein neues Angular-Projekt mit dem Namen „csv-api-abrufen“. Navigieren Sie in das neu erstellte Projektverzeichnis und öffnen Sie es in Ihrer Entwicklungsumgebung.
Schritt 2: Komponente erstellen
Als nächstes erstellen wir eine Angular-Komponente, die für den Abruf der CSV-Datei von der API verantwortlich sein wird. Führen Sie den folgenden Befehl aus, um eine neue Komponente mit dem Namen „csv-abrufen“ zu erstellen:
ng generate component csv-abrufen
Dieser Befehl erstellt eine neue Komponente mit dem Namen „csv-abrufen“. Die zugehörigen Dateien werden automatisch erstellt und platziert.
Schritt 3: HTTP-Anfrage senden
Jetzt, da wir eine Komponente haben, können wir die API-Anfrage senden und die CSV-Datei abrufen. Angular bietet die HttpClient-Klasse, um HTTP-Anfragen zu senden. Öffnen Sie die Datei „csv-abrufen.component.ts“ und fügen Sie den folgenden Code hinzu:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-csv-abrufen',
templateUrl: './csv-abrufen.component.html',
styleUrls: ['./csv-abrufen.component.css']
})
export class CsvAbrufenComponent implements OnInit {
- constructor(private http: HttpClient) { }
- ngOnInit(): void {
this.getCsvData();
}
getCsvData() {
this.http.get('https://api.example.com/csv-data').subscribe((data: any) => {
// Downloads the CSV file
const csvData = 'data:text/csv;charset=utf-8,' + encodeURI(data);
const link = document.createElement('a');
link.setAttribute('href', csvData);
link.setAttribute('download', 'data.csv');
link.click();
});
}
}
In dem oben gezeigten Code verwenden wir die HttpClient-Klasse, um eine HTTP-GET-Anfrage an die URL ‚https://api.example.com/csv-data‘ zu senden. Das Ergebnis wird in Form einer CSV-Datei erhalten.
Der CSV-Inhalt wird dann in eine Data-URL konvertiert und ein Link wird erstellt. Dieser Link wird verwendet, um die CSV-Datei herunterzuladen. Der Name der heruntergeladenen Datei wird auf „data.csv“ gesetzt, kann jedoch nach Bedarf angepasst werden.
Parse #CSV File in Angular Complete Tutorial in 10 Minutes
Schritt 4: Komponente anzeigen
Nun müssen wir die Komponente in unserer Anwendung anzeigen. Öffnen Sie die Datei „app.component.html“ und fügen Sie den folgenden Code hinzu:
<app-csv-abrufen></app-csv-abrufen>
Dieser Code fügt einfach die „csv-abrufen“-Komponente in die Hauptansicht unserer Anwendung ein.
Schritt 5: Anwendung starten
Um die Angular-Anwendung zu starten, führen Sie den folgenden Befehl aus:
ng serve
Öffnen Sie dann Ihren bevorzugten Webbrowser und navigieren Sie zur URL „http://localhost:4200“. Hier sollten Sie nun die CSV-Datei von der API abrufen können.
Fazit
In diesem Artikel haben wir uns angesehen, wie man mit Angular eine CSV-Datei von einer API abrufen kann. Dazu haben wir eine Angular-Komponente erstellt, eine HTTP-Anfrage gesendet und die CSV-Datei heruntergeladen. CSV-Dateien sind eine beliebte Wahl für den Austausch von Tabellendaten und können mithilfe von Angular einfach von einer API abgerufen werden.
Weiterführende Ressourcen
- Angular HTTP Guide: https://angular.io/guide/http
- CSV Wikipedia-Artikel: https://de.wikipedia.org/wiki/CSV_(Dateiformat)