如何将 CSV 数据转换为 JSON 对象答案

【问题标题】：How to convert CSV Data to JSON Object如何将 CSV 数据转换为 JSON 对象
【发布时间】：2014-11-03 08:52:10
【问题描述】：

所以我有这个 csv 文件（csv 文件可能最好位于服务器端，但尚未决定）。用户很可能会从下拉菜单中看到从这些 csv 文件中进行选择的选项。然后在选择特定文件后，用户单击“输入”，然后这个选定的 csv 文件应该在 javascript 中作为数组读取。那么如何做到这一点？ :-

我的问题是How to pass variables and data from PHP to JavaScript?

___csv_file____

Class,      Subclass,           Company,    Product,
Chocolate,  Wafer chocolate,    Nestle, KitKat,
Chocolate,  White chocolate,    Nestle, Milkybar,
Chocolate,  White chocolate,    Nestle, Milkybar,
Chocolate,  Caramel chocolate,  Nestle, BarOne,
Chocolate,  Milk chocolate,     Nestle, Nestle Milk chocolate,
Chocolate,  Milk chocolate,     Nestle, Nestle Milk chocolate,
Chocolate,  Milk chocolate,     Nestle, Nestle Milk chocolate,
Chocolate,  Milk chocolate,     Nestle, Nestle Milk chocolate,
Chocolate,  Milk chocolate,     Cadbury,    Dairy milk,

为了手动阅读，这就是我们所做的。但正如您所看到的，它对所有 csv_data 进行了硬编码，但我想让它自动化（即通过读取 csv 文件生成）

    root = {
 "name": "Chocolate", "tag":"class",
 "children": [
  {
   "name": "Wafer", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "KitKat", "tag":"product"}
     ]
    }
   ]
  },

  {
   "name": "White", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "Milkybar", "tag":"product"}
     ]
    }
   ]
  },

    {
   "name": "Caramel", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "BarOne", "tag":"product"}
     ]
    }
   ]
  },    
    {
   "name": "Milk", "tag":"subclass",
   "children": [
    {
      "name": "Nestle", "tag":"company",
     "children": [
      {"name": "Nestle Milk", "tag":"product"}
     ]
    },  {
      "name": "Cadbury", "tag":"company",
     "children": [
      {"name": "Dairy Milk", "tag":"product"}
     ]
    }
   ]
  }




 ]
};

现在的问题是我希望 javascript 从本地位置读取这个 csv 文件。但是如何将 CSV 文件读入 JAVASCRIPT 中如此复杂的维度数组？

【问题讨论】：

"为了手动阅读，这是已经完成的操作jsfiddle.net/5Lv8gkqv" 放入相关代码（并且仅相关代码）在问题中，不要只是链接。这是 SO 问答的基础之一。
重点在于相关代码。甚至您的链接也包含许多不相关的 d3 代码。
首先，我很确定 Javascript 不能出于任何原因访问本地文件，因为这似乎是一个巨大的安全风险。其次，您必须从服务器端元素中获取 CSV 字符串并将其传递给您的 javascript。第三，您必须创建一个函数来手动将数据解析为一个对象。
大家好。 @Sirko Ive 添加了相关的 JS 代码。请看看和帮助
@rzach 每种服务器端语言都可以读取 CSV，例如：w3schools.com/php/func_filesystem_fgetcsv.asp，从那里我会通过 AJAX 将 JSON 格式的数据发送到您的脚本，一旦它到达客户端，您的代码似乎是可以显示它。 PS：我建议用您要使用的服务器端语言标记这个问题。

标签： javascript php arrays csv d3.js

【解决方案1】：

可能的设置：

PHP Web 服务器（或 NodeJS 服务器 - 我个人最喜欢的）

可能的工作流程：

CSV文件的php上传页面/或通过FTP/SSH上传
csv 在服务器上
带有参数 datafromid=csvfile 的 php 页面提供了从 csv 到 json 的数据转换。（如果 csv 文件不包含太多行，则将其读入 php 数组，并通过获取每个行 (fgetcsv()) 并将子数组添加到您的总数组中）
取决于您如何向 d3 提供数据，使用 ajax 访问该 php 页面以访问 json 或将其包含在您的页面中（我认为通过 ajax 加载它，从页面所在的浏览器访问文件，更好 - 你可以使用jQuery get())

【讨论】：

【解决方案2】：

首先在服务器上创建一个 PHP 文件，给它一个相关的名称，如 candyData.php，您可以在其中拥有：

//code to read your data.csv
//code which stores the data from the csv into an object $candyData
$json = json_encode($candyData);
return $json

然后在客户端使用 Javascript，我也将使用 JQuery：

jQuery.ajax({
    url: "http://example.mysite.com/rest/candyData.php",
    type: "GET",
    success: function (response) {
        var candyData = response;
        //Here you'd put all the code you currently have so you can visualize the data
    },
    error: function (response) {
        console.log("failed");
    }
});

【讨论】：