leggere file .csv con javascript/jquery

psicona

Nuovo Utente
10 Mar 2017
18
1
3
Ciao a tutti,
dopo aver scaricato diversi esempi ne ho trovato uno perfettamente funzionante che potrebbe fare al caso mio, per leggere un file .csv lato client.

Questo è il codice, copiato su un file .html e verificato il funzionamento:
Codice:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#upload").bind("click", function () {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
                if (regex.test($("#fileUpload").val().toLowerCase())) {
                    if (typeof (FileReader) != "undefined") {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var table = $("<table />");
                            var rows = e.target.result.split("\n");
                            for (var i = 0; i < rows.length; i++) {
                                var row = $("<tr />");
                                var cells = rows[i].split(",");
                                for (var j = 0; j < cells.length; j++) {
                                    var cell = $("<td />");
                                    cell.html(cells[j]);
                                    row.append(cell);
                                }
                                table.append(row);
                            }
                            $("#dvCSV").html('');
                            $("#dvCSV").append(table);
                        }
                        reader.readAsText($("#fileUpload")[0].files[0]);
                    } else {
                        alert("This browser does not support HTML5.");
                    }
                } else {
                    alert("Please upload a valid CSV file.");
                }
            });
        });
    </script>
    <input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" />
    <hr />
    <div id="dvCSV">
    </div>
Il cambiamento è che non voglio passare per un button e selezionare un file, ma inserirlo direttamente nel codice (ho solo questo file e non mi serve una dialog per sceglierlo).
Ho provato a inserire il nome del file direttamente al posto di #fileUpload ad inizio dello script ma non funziona.
Dove ho sbagliato?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi semplicemente fare cosi
Codice:
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<div id="risultato"></div>
<script>
    $.get('file.csv', function (file) {
        var riga = file.split(";");
        $.each(riga, function (elem) {
            $('#risultato').append('<p>' + riga[elem] + '</p>');
        });
    });
</script>
 

psicona

Nuovo Utente
10 Mar 2017
18
1
3
grazie criric,
ho provato ma non funziona il tuo codice.
O, meglio, per capire se viene esguito lo script ho messo due alert, uno prima del get e uno prima della chiusura dello script e vengono visualizzati.
Ma tutto ciò che c'è dopo il $.get non va.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ovviamente devi cambiare 'filer.csv' con il percorso del tuo file.
metti degli alert anche allinterno
 

psicona

Nuovo Utente
10 Mar 2017
18
1
3
certo, ho messo il nome del mio file e messo degli alert interni.
nessun alert interno viene visualizzato, mentre i due esterni si.

Come se non leggesse nemmeno il file.
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Forse ho capito male, il file lo hai sul server o è sul pc dell'utente.
Se è sul pc dell'utente l'unico modo per leggerlo è di caricarlo prima sul server.
 

psicona

Nuovo Utente
10 Mar 2017
18
1
3
è sul pc.
Non devo far altro che caricare il contenuto del csv in una select option
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
allora devi per forza utilizzare l'input di tipo file. Non puoi andare a leggere i file di un utente senza il suo permesso.
 

psicona

Nuovo Utente
10 Mar 2017
18
1
3
Grazie, ora mi è tutto chiaro.
L'unica maniera quindi è caricare su un server il file suddetto e fare in modo che l'applicazione/pagina web punti a quello.
Ultima domanda che ti faccio: questa questione di sicurezza vale anche per una APP ibrida html5? Immagino di si, quindi il problema dovrei ovviarlo allo stesso modo, caricando ogni volta la lista dal file uploadato
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Da quel poco che so, un app ibrida in html gira su un browser interno ad un framework,
quindi se per esempio il framework è scritto in C puoi utilizzare le funzioni del linguaggio C per leggere i file sul disco ed esportarle poi in javascript.
Ma qui siamo un po oltre le mie conoscenze.
 

psicona

Nuovo Utente
10 Mar 2017
18
1
3
Ho appena provato (sto utilizzando Intel XDK). Il codice iniziale della tua risposta funziona e carica i dati del csv direttamente nella select. Quindi con una app ibrida funziona. Unico neo, quando tu indichi:
Codice:
$('#risultato').append('<p>' + riga[elem] + '</p>');
Ottengo un elenco sia di valori che di etichetta, mentre nel file le righe sono così:
label1;valore1
label2;valore2
etc
bisogna quindi creare due array, in modo che con l'indice dovrei modificare la tua riga in questo modo:
Codice:
$('#risultato').append('<option value="' + riga[elem0] +'">' + riga[elem1] + '</option>');
ma non riesco a creare correttamente i due array, da cui estraggo il valore a seconda dell'indice
 

psicona

Nuovo Utente
10 Mar 2017
18
1
3
Risolto:
Codice:
    $.get('coefficienti.csv', function (file) {
        allTextLines = file.split(/\r\n|\n/);
            $.each(allTextLines, function (elem) {
                var riga = allTextLines[elem].split(";");
                        $('#etaPensione').append('<option value="' + riga[1] + '">' + riga[0] + '</option>');
            });
    });
 
  • Like
Reactions: criric