Lesen in eine lokale csv-Datei in javascript?
[BEARBEITEN] ich löste das problem mit D3, trotzdem danke!
Also ich habe eine csv Datei, sieht so ähnlich aus wie dieser, und ich müssen zum importieren einer lokalen csv-Datei in meine client-side javascript:
"L.Name", "F.Name", "Gender", "School Type", "Subjects"
"Doe", "John", "M", "University", "Chem I, statistics, English, Anatomy"
"Tan", "Betty", "F", "High School", "Algebra I, chem I, English 101"
"Han", "Anna", "F", "University", "PHY 3, Calc 2, anatomy I, spanish 101"
"Hawk", "Alan", "M", "University", "English 101, chem I" Ich schließlich tun müssen analysiert werden, und die Ausgabe etwas wie:
Chem I: 3 (number of people taking each subject)
Spanish 101: 1
Philosophy 204: 0 Aber jetzt bin ich stecken, nur importieren Sie es in javascript.
Mein Aktueller code sieht wie folgt aus:
<!DOCTYPE html>
<html>
<body>
<h1>Title!</h1>
<p>Please enter the subject(s) that you wish to search for:</p>
<input id="numb" type="text"/>
<button onclick="myFunction()">Click me to see! :) </button>
<script>
function myFunction() {
var splitResearchArea = [];
var textInput = document.getElementById('numb').value;
var splitTextInput = textInput.split(",");
for(var i =0; i<splitTextInput.length; i++) {
var spltResearchArea = splitTextInput[i];
splitResearchArea.push(spltResearchArea);
}
}Ich habe recherchiert und fand einige hilfreiche links auf Stackoverflow wie diese, diese, und diese aber ich bin neu in javascript und ich nicht ganz verstehen. Sollte ich Ajax verwenden? FileReader? jQuery? Was sind die Vorteile der Verwendung einer über den anderen? Und wie würden Sie diese umsetzen im code?
Aber ja, ich bin nur verwirrt, da ich bin sehr neu in javascript, so dass jede Hilfe in die richtige Richtung wäre toll. Danke!!!!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist, wie die
readAsBinaryString()von der FileReader API zum laden einer lokalen Datei.Grundsätzlich nur zu hören braucht, um change-Ereignis in
<input type="file">und Aufruf der readFile-Funktion.jsFiddle
<script type="text/csv">. Dies ist sicher, weil Browser ignorieren-Skript ohne javascript. Siehe diese ausgezeichnete Antwort<input type="file">damit der Benutzer beachten Sie von, dass bestimmte Datei laden, die der Nutzer selbst ausgewählt. Wenn dies nicht Ihren Anforderungen entsprechen, dann müssen Sie ein backendvar csv1 = [{ name: "bill", age: 34 }, { name: "ana", age: 44 }, { name: "cory", age: 18}]; var csv2 = [...]. Dies zeigt beispielhaft eine csv1-Datei mit 3 Zeilen und 2 Spalten, name und Alter.benutze ich diese Bibliothek von google: https://github.com/evanplaice/jquery-csv/
Ersten u haben, um
verwenden und dann Anleitung aus Seite
Gibt es so viele Möglichkeiten, was Sie wollen, als Ihr Euch möglicherweise vorstellen könnt.
Wäre ich dabei, ich könnte beginnen, durch die Spaltung der Eingabe von text in Zeilen, etwa so:
Dann würde ich extrahieren Sie die Namen der überschriften aus der ersten Zeile.
Sie müssen eine Funktion zum Lesen der Werte aus jeder Zeile.
Als Nächstes würde ich die Schleife über die restlichen Zeilen und erstellen Sie ein array von Objekten, die die Werte in den Zeilen.
Wenn das alles funktioniert, sollten Sie am Ende mit einem array von Objekten, die die Werte in jeder Zeile in der CSV.
Oben ist eine grobe übersicht, was der code Aussehen könnte. Ich habe es nicht getestet und es ist sicherlich nicht die Produktion bereit, aber ich hoffe, es gibt Ihnen eine Idee von, wie man über das tun, was Sie wollen.
Ich habe mehrere built-in Javascript-Funktionen. Ich schlage vor, Suche Sie auf MDN, wenn Sie nicht vertraut mit Ihnen, Sie sind gut zu wissen.
Schließlich, es ist eine seltsame Eigenart in Javascript mit automatischer Semikolon einfügen (eine schlechte Eigenschaft der Sprache, IMO). Um Probleme zu vermeiden, setzen Sie nicht eine neue Zeile vor einer öffnenden Klammer.
Immer schreiben
und schreiben nicht
Javascript [methodname] MDN. Beachten Sie bitte außerdem, sicher sein, zu Stimmen die Antworten, die Sie finden hilfreich.