Javascript - 无法访问从 csv 文件创建的数组的数组元素

Question

我需要将数据库生成的 csv 文件中的数据放入数组中。我下载了文件并将其放入与脚本相同的文件夹中。

csv文件的格式是这样的：（可惜不能显示原始数据）

https://i.imgur.com/bRDEpJX.png

我找到了用于从 csv 文件导入数据的 d3 脚本。 我的导入代码如下所示：

var myArray= []

d3.csv("data.csv", function(data){
    myArray.push(data)
});

console.log(myArray)

所以，现在我可以使用控制台命令“myArray”在控制台中显示数组。 看起来像这样：

https://i.imgur.com/nTkYbwF.png

当我打开数组时，我可以看到一些格式如下的对象：

0: { "HeaderA": "A1", "HeaderB": "B1", "HeaderC": "C1", … }

1: { "HeaderA": "A2", "HeaderB": "B2", "HeaderC": "C2", … }

2: { "HeaderA": "A3", "HeaderB": "B3", "HeaderC": "C3", … }

等等……

我的问题：

1234563 /p>

1. 我不能在我的代码中输入myArray[0] 来循环遍历对象。我收到错误消息："ReferenceError: array is not defined"

2. 我需要像这样格式化数组...

[[“标题A”，“A1”，“A2”，“A3”，“A4”“A5”]， [“标题B”，“B1”，“B2”，“B3”，“B4”“B5”]，[“标题C”，“C1”，“C2”，“C3”，“C4”“C5”]， ...]

...处理数据。 由于无法访问单个元素，我不知道该怎么做？

谢谢你:)

Answer 1

可能既不是最快的解决方案，也不是最有效的解决方案，但您可以通过以下方法获得所需的格式，分为多个步骤：

• 制作一组唯一键，以便您知道需要使用哪些键。
• 映射上述键并从原始数组中获取该键的所有值。

假设这样的样本输入：

var parsedArray = [
    { "HeaderA": "A1", "HeaderB": "B1", "HeaderC": "C1" },
    { "HeaderA": "A2", "HeaderB": "B2", "HeaderC": "C2" },
    { "HeaderA": "A3", "HeaderB": "B3", "HeaderC": "C3" }
];

（从您的示例中获得灵感），这是获得所需格式的代码：

const uniqueKeys = [...new Set(...parsedArray.map(i => Object.keys(i)))];

const res = uniqueKeys.map(k => {
    return [k, ...parsedArray.map(i => i[k]).filter(i => i !== null && i !== undefined)];
});
console.log(res);

解释：

[...new Set(...parsedArray.map(i => Object.keys(i)))];

扩展运算符 (...) 用于扩展值，因为数组是可迭代的。其中的map 将收集对象（HeaderA、HeaderB、HeaderC）的所有键 等等。 new Set 将使数组唯一，以便删除重复项。你最终会得到一个数组，如：["HeaderA","HeaderB","HeaderC"]。

关于第二部分，return 语句为每个唯一键创建一个新数组，将标题本身作为第一个元素返回，并将作为数组值添加原始元素中的所有元素其键是当前循环的键的数组。

在这里工作：https://jsfiddle.net/jde37v64/1/

附带说明，这些值是异步写入回调中的，因此您应该这样做：

var myArray= []

d3.csv("data.csv", function(data){
    myArray.push(data)
    console.log(myArray)
    // Write your code here, NOT OUTSIDE OF THIS FUNCTION BLOCK.
});

否则你将无法使用myArray，因为它只能在回调中使用。