javascript - 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. 我需要像这样格式化数组...

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

...处理数据。我不知道我怎么能做到这一点，因为我无法访问单个元素？

谢谢你 ：）

标签： javascriptarrayscsvd3.js

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将使数组unique，以便删除重复项。你最终会得到一个数组，如：["HeaderA","HeaderB","HeaderC"]。

关于第二部分，return 语句为每个唯一的 key创建一个新数组，将 header 本身作为第一个元素返回，并将作为数组值添加原始数组中其 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，因为它仅在回调中可用。