2010-08-30 3 views
10

Кто-нибудь знает, как получить URL-адрес csv и преобразовать его в объект json, чтобы я мог использовать инструменты для построения диаграмм Google в js?конвертировать файл csv в объект json datatable

+0

Вы пытаетесь разобрать CSV в JS или другой язык и просто, что выход JSON для JS? –

+0

Мне удалось разобрать файлы csv на два массива в C# на сервере. Теперь я хотел бы создать объект JSON (который я могу использовать в интерфейсе, используя данные этих двух массивов) для привязки к диаграмме google js api. – locoboy

ответ

3

Насколько я знаю, для большинства сценариев вы можете превратить csv в массив массивов js массивов, матрицу или любой объект javascript, следующий за вашим графическим инструментом.

Вам может понадобиться:

  1. Получить содержимое файла CSV
  2. Parse it
  3. Оберните результаты 2 в ваш JSON картирование инструмент
  4. Позвоните своему картирование библиотека
(?)

Для 1, если CSV-файл размещен в вашем домене, вы можете сделать простой XMLHttpRequest, иначе попробуйте выполнить поиск здесь. ame origin policy ".
Сложная часть - это точка 2. Я видел несколько неудачных попыток для разбора CSV-файлов вручную (точки с запятой могут содержаться как часть значения и т. Д.) ... Проверьте ссылку.

1

CSV и JSON - это разные форматы. JSON является иерархическим, а CSV представляет собой список значений. Поэтому, я думаю, вам нужно сначала разобрать CSV (using a parser и not implementing yourself). Этот анализатор предоставит вам объект, который затем можно было бы сериализовать в JSON или, возможно, преобразовать в другой объект до serializing (еще раз используя parser), чтобы получить желаемый формат.

18

Я понимаю, что это старый вопрос, но я столкнулся с этим сегодня, чтобы сделать то же самое и написал сценарий, чтобы сделать это. Вы можете проверить это на моем github repo.

Следующий код будет сделать то, что вы после того, как (с помощью 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 
    } 
}); 

Днем кодирования :)

+1

Я только что использовал ваш файл, чтобы получить быстрый прототип чего-то. ALl выглядел хорошо, пока не обнаружил, что персонажи находят свой путь в Mongo (раньше я этого не замечал). Несколько моментов в коде требуют myString.replace (/ \ r/gm, ""), чтобы очистить его. – joevallender

+0

@joevallender Спасибо, что указали это. Любой шанс, что вы все еще можете вспомнить, что вам нужно было сделать, и создать проблему для него?https://github.com/aaronsnoswell/csvjson.js/issues/new. – aaronsnoswell

+0

Я бы отправил запрос на вытягивание, если бы я не делал этого на лету, я сейчас задержу некоторые заметки в очереди на проблемы – joevallender

1

использовать этот код руководство для разбора CSV файл в формате 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 приятно для этого.

<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> 

Выгрузка этот 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 | 
+------+----------------+---------------+------------+ 

вы получите этот вывод в консоль:

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: [] 
Смежные вопросы