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", … }

等等...

我的问题：

1. 当我在控制台中输入myArray[0] ，我可以看到第一个对象（0 - 像上面一样），但我无法访问里面的元素 (A1,B1,C1...) 为什么？/如何？

2. 我不能在我的代码中输入myArray[0]来循环遍历对象。 我收到错误消息： “ReferenceError：未定义数组”

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

[["HeaderA", "A1", "A2", "A3", "A4" "A5"],
 ["HeaderB", "B1", "B2", "B3", "B4" "B5"],["HeaderC", "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 语句为每个唯一的 key创建一个新数组，将标头本身作为第一个元素返回，并将添加原始数组中所有元素作为数组值，其键是当前循环的 key 。

在这里工作小提琴： 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 ，因为它仅在回调中可用。