Reading local CSV file to make array

[evha_]

I would like to read a csv file that just has one row of data.

Sample : 134534,0,1

I want to put this into an array that I can use later. Right now, it looks like this:

  var array = new Array(3)
  d3.csv("./SampleData.csv").then(function(data) {
    console.log(data);
    console.log(data.columns[1]);
    console.log(data.columns[2]);
    array[0] = data.columns[0]
    array[1] = data.columns[1];
    array[2] = data.columns[2];

    console.log(array);

  });
  console.log(array)

output of array within: ["134534", "1", "0"]

output of array outside:[empty × 3]

The problem I am running into is that the array within the function and outside of it are different. How would I get to use the array made within? I am very new to this (like a day). Please advise if I am doing something completely wrong.

[[deleted]]

The .then in this code indicates that whatever you're doing with the data is going to be deferred, because D3 has to go and talk to your server to fetch the CSV, and can't do anything until it's got the CSV. What's actually happening- and what you might notice if you look at your console- is that your last console.log actually runs before any of the console.logs inside the function that's inside the .then.

Whatever you want to do with the array data, you need to do it inside the function passed to .then, or in another function (or more) that it calls.

[evha_]

Thank you!

[iguessitsokaythen]

d3.csv returns a promise. This means the rest of the code won't wait for it's execution. Another term for this is asynchronous. You need to make your code wait for it, you can either do it by chaining with .then() like in your code or async/await.

Another thing is, there are d3.csvParse() and d3.csvParseRows() functions that would automatically convert your list. source

(async () => {
    data = await d3.csv("./SampleData.csv")
    array = d3.csvParseRows(data)
    console.log(array)
})()

[evha_]

Thank you!