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 ，因為它僅在回調中可用。