Question

有谁知道如何获取csv url文件并将其转换为json对象，以便我可以在js中使用谷歌图表工具？

Answer 1

我意识到这是一个老问题，但我今天遇到它需要做同样的事情，并编写了一个脚本来做到这一点。您可以在我的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
    }
});

快乐编码：）

Answer 2

据我所知，对于大多数情况，您可以将csv转换为数组数组，矩阵或符合图表工具约定的任何javascript对象。

您可能需要：

获取CSV文件内容
Parse it
将结果从2包装到图表工具json（？）
调用图表库

对于1，如果CSV文件托管在您的域中，您可以执行简单的XMLHttpRequest，否则请尝试在此处搜索“相同的原始策略”。
棘手的部分是第2点。我已经看到几个尝试手动解析CSV文件的失败尝试（分号可以作为值的一部分包含在内等）...查看链接。

Answer 3

使用此代码作为指南将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
}

Answer 4

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: []

Answer 5

CSV和JSON是不同的格式。 JSON是分层的，而CSV表示值列表。所以我想你需要首先解析CSV（using a parser当然和not implementing yourself）。此解析器将为您提供一个对象，然后您可以将其序列化为JSON，或者可能在serializing之前转换为另一个对象（再次使用parser）以获得所需的格式。

将csv文件转换为json对象数据表

5 个答案: