convert csv file to json object datatable

2楼-- · 2020-02-09 10:01

I realise this is an old question, but I came across it today needing to do the same thing and wrote a script to do it. You can check it out at my github repo.

The following code would accomplish what you're after (using 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
    }
});

Happy coding :)

0人赞添加讨论(0) 举报

劫难

3楼-- · 2020-02-09 10:03

CSV and JSON are different formats. JSON is hierarchical while CSV represents a list of values. So I guess you will need to first parse the CSV (using a parser of course and not implementing yourself). This parser will give you an object which you could then serialize into JSON or probably convert into another object before serializing (once again using a parser) in order to get the desired format.

0人赞添加讨论(0) 举报

来，给爷笑一个

4楼-- · 2020-02-09 10:04

use this code for guide to parse csv file to 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
}

0人赞添加讨论(0) 举报

Fickle 薄情

5楼-- · 2020-02-09 10:07

Papa Parse is nice for that.

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

Uploading this 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  |
+------+----------------+---------------+------------+

you'll get this output in the 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: []

0人赞添加讨论(0) 举报

迷人小祖宗

6楼-- · 2020-02-09 10:09

As far as I know, for most scenarios, you can turn csv into a js Array of Arrays, a Matrix, or any javascript object that follows your charting tool convention.

You may need to:

Get the CSV file content
Parse it
Wrap the results from 2 into your charting tool json(?)
Call your charting library

For 1, if the CSV file is hosted in your domain, you can do a simple XMLHttpRequest, else try searching here "same origin policy".
The tricky part is the point 2. I've seen several failed attempts for parsing CSV files by hand (semicolons can be contained as part of the value, etc)... Check out the link.

0人赞添加讨论(0) 举报

convert csv file to json object datatable

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间