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

以此类推...

我的问题：

当我在控制台中键入myArray[0]时，我可以看到第一个对象（0-如上），但是我无法访问其中的元素（A1，B1，C1 ...），为什么？/如何？
我无法在代码中键入myArray[0]来例如遍历对象。我收到错误消息：“ ReferenceError：未定义数组”
我需要像这样格式化数组...

[["HeaderA", "A1", "A2", "A3", "A4" "A5"],
 ["HeaderB", "B1", "B2", "B3", "B4" "B5"],["HeaderC", "C1", "C2", "C3", "C4" "C5"],...]

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

谢谢：）

Answer 1

可能既不是最快的解决方案，也不是最有效的解决方案，但是您可以按照以下步骤来获得所需的格式：

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

假设输入示例如下：

// создать подключение
var socket = null;
var nickname;

// отправить сообщение из формы publish
document.forms.publish.onsubmit = function() {
  var outgoingMessage = this.message.value;
  socket.send(outgoingMessage);
  return false;
};

const connect = document.getElementById('connect');
const disconnect = document.getElementById('disconnect');

connect.addEventListener('click', function(){
    start();
});

function start() {
    socket = new WebSocket("ws://localhost:8081");

    socket.onmessage = function(event) {
        var incomingMessage = event.data;
        showMessage(incomingMessage);
    };

    socket.onopen = authorizate();
}

function authorizate(){
    nickname = document.getElementById('nickname').value;
    document.getElementById('nickname').style.display = "none";
    document.getElementById('subm').style.display = "inline-block";
    disconnect.style.display = "inline-block";
    connect.style.display = "none";
    console.log(nickname);
    socket.send(nickname);
}

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

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)))];将收集对象（HeaderA，HeaderB，HeaderC）等的所有所有键。 map将使数组唯一，以便删除重复项。您将得到一个像new Set这样的数组。

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

在这里工作的小提琴：https://jsfiddle.net/jde37v64/1/

请注意，值是在回调中异步写入的，因此您应该这样做：

["HeaderA","HeaderB","HeaderC"]

否则，您将无法使用var myArray= [] d3.csv("data.csv", function(data){ myArray.push(data) console.log(myArray) // Write your code here, NOT OUTSIDE OF THIS FUNCTION BLOCK. });，因为它仅在回调内可用。

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

1 个答案: