2010-08-30 36 views
10

Qualcuno sa come ottenere un file csv url e convertirlo in un oggetto json in modo che possa utilizzare gli strumenti di google charting in js?convertire il file csv in json object datatable

+0

Stai cercando di analizzare il CSV in JS o in un'altra lingua e solo che uscita JSON per JS? –

+0

Sono stato in grado di analizzare i file CSV in due array in C# sul back-end. Ora vorrei creare un oggetto JSON (che posso usare sul front-end usando i dati di questi due array) per associarmi a un grafico di google js api. – locoboy

risposta

3

Per quanto ne so, per la maggior parte degli scenari, è possibile trasformare csv in un array js di matrici, una matrice o qualsiasi oggetto javascript che segue la convenzione del proprio strumento di creazione di grafici.

Potrebbe essere necessario:

  1. Prendi il contenuto del file CSV
  2. Parse it
  3. Avvolgere i risultati da 2 nel vostro JSON strumento di creazione di grafici
  4. Chiama tua libreria grafici
(?)

Per 1, se il file CSV è ospitato nel dominio, è possibile eseguire una semplice XMLHttpRequest, altrimenti provare a cercare qui "s politica di origine ".
La parte difficile è il punto 2. Ho visto diversi tentativi falliti per analizzare i file CSV a mano (il punto e virgola può essere contenuto come parte del valore, ecc.) ... Controlla il link.

1

CSV e JSON sono formati diversi. JSON è gerarchico mentre CSV rappresenta un elenco di valori. Quindi immagino che sarà necessario prima analizzare il CSV (using a parser ovviamente e not implementing yourself). Questo parser ti darà un oggetto che potresti serializzare in JSON o probabilmente convertirlo in un altro oggetto prima di serializing (ancora usando un parser) per ottenere il formato desiderato.

18

Mi rendo conto che questa è una domanda vecchia, ma oggi mi sono imbattuto in tutto ciò che ha bisogno di fare la stessa cosa e ho scritto una sceneggiatura per farlo. Puoi verificarlo sul mio github repo.

Il seguente codice dovrebbe compiere ciò che stai dopo (usando jQuery):

$.ajax("http://my.domain.com/mycsvfile.csv", { 
    success: function(data) { 
     var jsonobject = csvjson.csv2json(data); 
     // Now use jsonobject to do some charting... 
    }, 
    error: function() { 
     // Show some error message, couldn't get the CSV file 
    } 
}); 

Felice di codifica :)

+1

Ho appena usato il file per ottenere un rapido prototipo di qualcosa. Sembrava buono fino a quando ho scoperto che i personaggi stavano trovando la loro strada in un Mongo (non avevo notato prima di allora). Alcuni punti nel codice richiedevano myString.replace (/ \ r/gm, "") per ripulirlo. – joevallender

+0

@joevallender Grazie per averlo indicato. Qualche possibilità di ricordare ancora cosa hai dovuto fare e creare un problema per questo?https://github.com/aaronsnoswell/csvjson.js/issues/new. – aaronsnoswell

+0

Avrei inviato una richiesta di pull se non lo stavo facendo al volo, lascerò cadere alcune note nella coda dei problemi ora – joevallender

1

utilizzare questo codice per guida analizzare il file csv a JSON ...

function processFiles(files) { 
    var file = files[0]; 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     var output = document.getElementById("fileOutput"); 
     var texto = e.target.result; 
     csvJSON(texto); 
    }; 
    reader.readAsText(file); 
} 
function csvJSON(csv) { 
    var lines = csv.split("\n"); 
    var result = []; 
    var headers; 
    for (var i = 0; i < lines.length; i++) { 
     headers = lines[i].split("\n"); 
    } 
    var cont = 0; 
    for (var i = 0; i < lines.length; i++) { 

     var obj = {}; 
     var currentline = lines[i].split("\n"); 
     for (var j = 0; j < headers.length; j++) { 
      obj[cont] = currentline[j]; 
     } 
     cont++; 
     result.push(obj); 
    } 

    return JSON.stringify(result); //JSON 
} 
3

Papa Parse è bello per quello.

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="libraries/PapaParse-4.1.2/papaparse.min.js"></script> 

    <script> 
    $(document).ready(function(){ 

     $("#submitbutton").click(function(){ 
      var myfile = $("#csvfile")[0].files[0]; 
      var json = Papa.parse(myfile, 
       { 
       header: true, 
       skipEmptyLines: true, 
       complete: function(results) { 
        console.log("Dataframe:", JSON.stringify(results.data)); 
        console.log("Column names:", results.meta.fields); 
        console.log("Errors:", results.errors); 
       } 
      }); 

     }) 
    }) 
    </script> 

</head> 

<body> 
    <form name="foo" method="post" enctype="multipart/form-data"> 
     <input id="csvfile" type="file" value="i"> 
    </form> 

    <button id="submitbutton" type="button">Upload CSV file!</button> 

</body> 

</html> 

caricamento di questo CSV:

+------+----------------+---------------+------------+ 
| Id | Petal.Length | Petal.Width | Species | 
+======+================+===============+============+ 
| 1 |  1.4  |  0.2  | setosa | 
+------+----------------+---------------+------------+ 
| 2 |  1.4  |  0.2  | setosa | 
+------+----------------+---------------+------------+ 
| 3 |  1.3  |  0.2  | setosa | 
+------+----------------+---------------+------------+ 
| 4 |  3.9  |  1.4  | versicolor | 
+------+----------------+---------------+------------+ 
| 5 |  3.5  |  1  | versicolor | 
+------+----------------+---------------+------------+ 
| 6 |  4.2  |  1.5  | versicolor | 
+------+----------------+---------------+------------+ 
| 7 |  5.4  |  2.3  | virginica | 
+------+----------------+---------------+------------+ 
| 8 |  5.1  |  1.8  | virginica | 
+------+----------------+---------------+------------+ 

Otterrete questo output nella console:

Dataframe: [{"Id":"1","Petal.Length":"1.4","Petal.Width":"0.2","Species":"setosa"},{"Id":"2","Petal.Length":"1.4","Petal.Width":"0.2","Species":"setosa"},{"Id":"3","Petal.Length":"1.3","Petal.Width":"0.2","Species":"setosa"},{"Id":"4","Petal.Length":"3.9","Petal.Width":"1.4","Species":"versicolor"},{"Id":"5","Petal.Length":"3.5","Petal.Width":"1","Species":"versicolor"},{"Id":"6","Petal.Length":"4.2","Petal.Width":"1.5","Species":"versicolor"},{"Id":"7","Petal.Length":"5.4","Petal.Width":"2.3","Species":"virginica"},{"Id":"8","Petal.Length":"5.1","Petal.Width":"1.8","Species":"virginica"}] 
Column names: ["Id", "Petal.Length", "Petal.Width", "Species"] 
Errors: []