将 csv 数据合并到 html javascript答案

【问题标题】：Merge csv data into html javascript将 csv 数据合并到 html javascript
【发布时间】：2021-05-02 21:48:37
【问题描述】：

我在没有网络服务器的计算机上本地运行带有 javascript 的 html。由于我没有使用网络服务器，因此由于 CORS 限制，我无法在本地计算机上打开 csv 文件。

在我的 index.html 中。有这个从 csv 文件中读取数据的示例代码。

// Get the data
d3.csv(dataCSV, function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
        d.open = +d.open;
    });

这是 dataCSV 文件的示例。

date,close,open
1-May-12,58.13,3.41
30-Apr-12,53.98,4.55
27-Apr-12,67.00,6.78

我想将 csv 数据硬编码到 index.html 中，然后将数据放入“d”对象中？这是一个我希望它工作的伪代码。

<script>
data = {
    date,close,open
    1-May-12,58.13,3.41
    30-Apr-12,53.98,4.55
    27-Apr-12,67.00,6.78
};

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
    d.open = +d.open;
});

我尝试了以下操作，但在“1-May-12,58.13,3.41”上出现以下错误“Uncaught SyntaxError: Unexpected number” p>

任何指针都将不胜感激。

第二期：我试图在本地计算机上使用 csv 执行以下图表，但出现 CORS 错误。第一个回复确实为我解决了导入 csv 的问题。但是，现在，当我运行代码时，出现以下错误：

d3.min.js:1 错误：属性 d：预期数字， “MNaN,NaNLNaN,NaNL……”。

这是我试图在没有 Web 服务器的 PC 上本地模拟的基本代码。 https://bl.ocks.org/d3noob/e34791a32a54e015f57d

【问题讨论】：

标签： javascript html

【解决方案1】：

您需要将 data={...} 更改为字符串并在 JavaScript 中解析 CSV，下面的代码应该是您想要完成的。

const data = `date,close,open
1-May-12,58.13,3.41
30-Apr-12,53.98,4.55
27-Apr-12,67.00,6.78`;
const lines = data.split('\n');

const keys = lines.shift().split(',');
const entries = [];

for (const line of lines) {
  const index = entries.length;
  entries[index] = {};

  const values = line.split(',');
  for (let i = 0; i < values.length; i++) {
    entries[index][keys[i]] = values[i];
  }
}

console.log(entries);

【讨论】：