Share
Dieser Beitrag zeigt Ihnen, wie Sie CSV-Dateidaten nach AngularJS hochladen, die Daten lesen und anschließend zur Verarbeitung in JSON konvertieren. Anschließend erfahren Sie, wie Sie das Ganze umgekehrt ausführen und einen CSV-Daten-Dump von AngularJS herunterladen.
CSV-Dateien werden aufgrund ihrer Einfachheit bevorzugt. Sie werden auch von vielen Arten von Programmen stark unterstützt und bieten eine einfache Möglichkeit, Tabellenkalkulationsdaten darzustellen.
Bevor Sie mit diesem Lernprogramm beginnen, stellen Sie sicher, dass Node.js auf Ihrem Computer installiert ist. Wenn Sie es noch nicht haben, besuchen Sie die offizielle Website und installieren Sie sie.
Sie sollten auch ein Grundverständnis für die folgenden Technologien besitzen:
Wenn Sie bereits Node.js installiert haben, prüfen Sie, ob Sie über die neuesten Versionen von Node und NPM verfügen.
Knoten -v npm -v
Es gibt verschiedene Möglichkeiten, CSV in Angular zu manipulieren. Dazu gehören:
Accentsconagua
csvtojson: Dies ist ein Knotenpaket, das auch einfach zu verwenden ist.Datei oder Klecks Objekte, um die zu lesende Datei anzugeben. Dies ist jedoch kein effizienter Weg, da Sie immer noch alle Zeilen der CSV und dann durchlaufen müssen JSON.stringify die Ergebnisse.Unser Ziel ist es, Folgendes tun zu können:
Unsere Oberfläche sollte ungefähr so aussehen:
Zuerst schreiben wir den HTML-Code für die oben gezeigte Schnittstelle.
Erstellen Sie einen Ordner mit dem Namen Mein Projekt, CD in den Projektordner und erstellen Sie zwei Dateien: home.html und app.js.
mkdir my_project cd my_project touch home.html touch app.js
Da wir das Papa Parse-Modul verwenden werden, besuchen Sie die offizielle Website und laden Sie die Bibliothek herunter. Extrahieren Sie dann den Inhalt und speichern Sie die papaparse.js und papaparse.min.js Dateien in Ihrem Projektordner. Ihre Projektstruktur sollte so aussehen:
mein_projekt / app.js home.html papaparse.js papaparse.min.js
Nachfolgend finden Sie den HTML-Code zum Erstellen unserer Schnittstelle. Speichern Sie es als home.html.
- Die Excel-Datei sollte drei Spalten enthalten
- Die erste Spalte enthält das Referenz
- Die zweite Spalte enthält das Vorname
- Die dritte Spalte enthält das Nachname
- Die zweite Spalte enthält das Geburtsdatum
- Die dritte Spalte enthält das Sexvon der Person
Die Spaltenüberschriften sollten sein Referenz ,Vorname ,Nachname,Dob,Sex
Eine Beispieldatei steht zum Download zur Verfügung
Ihre hochgeladene CSV-Datei wird Ihnen in einer Vorschau zur Bestätigung angezeigt
Im obigen Code verwenden wir die ng-app Anweisung zur Definition unserer Anwendung. Wir fügen dann die Bibliotheken AngularJS und jQuery zu unserer Webseite hinzu sowie die restlichen Skriptdateien, d. H. app.js, papaparse.js, und papaparse.min.js.
Wir definieren dann den Controller der Anwendung und binden die HTML-Steuerelemente an die Anwendungsdaten.
Da wir bereits über eine Schnittstelle mit dem Link verfügen, über den ein Benutzer die CSV-Datei herunterladen kann, schreiben wir jetzt den Angular-Code, der die herunterzuladenden Daten enthält, und binden ihn mit den HTML-Steuerelementen.
Anschließend stellen wir den CSV clientseitig zum Download bereit.
Im app.js, Initialisieren Sie die Angular App und definieren Sie die CsvCtrl Regler.
'streng verwenden'; / * App Module * / var app = angle.module ("myApp", []); Definieren Sie als Nächstes die Beispieldaten in JSON und konvertieren Sie sie mithilfe des Moduls Papa Parse in eine CSV-Datei.
app.controller ("CsvCtrl", ["$ scope", "$ q") Funktion ($ scope, $ q) var clearAlerts = Funktion () $ scope.error = , $ scope.warning = null $ scope.download = function () var a = document.createElement ("a"); var json_pre = '["Referenz": "1", "Vorname": "Lauri", "Nachname": "Amerman "," Dob ":" 1980 "," Sex ":" F ", " Referenz ":" 2 "," Vorname ":" Rebbecca "," Nachname ":" Bellon "," Dob ":" 1977 "," Sex ":" F ", " Reference ":" 3 "," Vorname ":" Stanley "," Nachname ":" Benton "," Dob ":" 1984 "," Sex ":" M "] 'var csv = Papa.unparse (json_pre); if (window.navigator.msSaveOrOpenBlob) var blob = neuer Blob ([decodeURIComponent (encodeURI (csv)))], type:" text / csv; charset = utf -8; "); navigator.msSaveBlob (blob, 'sample.csv'); else a.href = 'data: attachment / csv; charset = utf-8,' + encodeURI (csv); a.target = '_blank'; a.download = 'sample.csv'; document.body.appendChild (a); a.click ();]);Hier ist die Angular-Funktion, mit der eine CSV-Datei hochgeladen und gelesen wird.
app.controller ("CsvCtrl", ["$ scope", "$ q", Funktion ($ scope, $ q) // ... der Rest des Codes // Upload und Lesen der CSV-Funktion $ scope.submitForm = function ( form) clearAlerts (); var Dateiname = document.getElementById ("bulkDirectFile"); if (Dateiname.Wert.length < 1 ) ($scope.warning = "Please upload a file"); else $scope.title = "Confirm file"; var file = filename.files[0]; console.log(file) var fileSize = 0; if (filename.files[0]) var reader = new FileReader(); reader.onload = function (e) var table = $("Hier bestätigen wir, ob die CSV gültig und nicht leer ist. Wenn sie leer ist oder keine CSV-Datei hochgeladen wurde, erhalten Sie eine Warnmeldung: "Bitte laden Sie eine Datei hoch." Wenn die CSV gültig ist, konvertieren wir die Daten in ein Tabellenformat und präsentieren sie wie unten gezeigt.
Im letzten Teil dieses Lernprogramms werden die CSV-Daten in das JSON-Format (ein Formular, das von einer API verwendet werden kann) konvertiert. Nachfolgend finden Sie die Funktion, mit der die CSV-Daten in JSON konvertiert werden. Wir werden die Daten nur auf der Konsole ausdrucken, da uns keine API für die Verwendung der Daten zur Verfügung steht.
app.controller ("CsvCtrl", ["$ scope", "$ q"), Funktion ($ scope, $ q) //… // In JSON-Funktion konvertieren $ scope.add = function () var Table = document .getElementById ('Table'); var file = document.getElementById ("bulkDirectFile"). files [0]; $ ('. loading'). show (); var allResults = []; Papa.parse (file, download: true, header: true, skipEmptyLines: true, Fehler: function (err, file, inputElem, reason) , complete: function (Ergebnisse) allResults.push (results.data); console.log (results.data ));]);In der obigen Funktion rufen wir die CSV-Datei ab und konvertieren sie mit Papa Parse in JSON. Der vollständige Code in app.js wird unten gezeigt.
In diesem Beitrag haben Sie gesehen, wie Sie CSV-Daten hochladen und herunterladen und wie Sie CSV-Daten in JSON analysieren und analysieren können.
Ich hoffe, dieses Tutorial hat Ihnen geholfen zu verstehen, wie Sie CSV-Dateien mit dem Modul Papa Parse bearbeiten und wie leistungsfähig diese Bibliothek ist. Experimentieren Sie mit größeren Dateien, um die volle Funktionalität der Papa Parse-Bibliothek zu sehen.
