Create a new array from the csv file

Question

I have imported a CSV file using D3, the 'University', 'State', 'Salary' and the 'Type' are the values that I need to do more visualization. Now I am trying to create a new array that imports the above four attributes.

I create a new array using var SalaryArray = []

I have imported the CSV file, by returning the attributes that I need using

d3.csv("Median Salary Integration 2018.csv")
    .row(function (d) {
        return {University: String(d.University), State: String(d.State),Salary: String(d.Median), Type: String(d.Type)}

I tried

SalaryData = d3.csv("Median Salary Integration 2018.csv")
    .row(function (d) {
        return {
            University: String(d.University), State: String(d.State),
            Salary: String(d.Median), Type: String(d.Type)
        }
    })

but by console.log(SalaryData), the result doesn't show.

Related (duplicate? it wasn't my first reaction, but...): http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call and https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron — T.J. Crowder, May 29 '19 at 12:41
The overwhelming convention in JavaScript is that variable, parameter, property, and function name start with a lower case character (with the exception of *constructor* functions, which start with a capital letter). So `salaryData`, not `SalaryData`, and `university`, not `University`. I strongly recommend following standard naming conventions when asking for help from other people. (It's a good idea when not asking for help, too.) — T.J. Crowder, May 29 '19 at 13:59

T.J. Crowder · Accepted Answer · 2019-05-29T13:58:26.813

1

The documentation shows that you get the value in a callback, not as a return value:

d3.csv("Median Salary Integration 2018.csv")
.row(function (d) {
    return {
        University: String(d.University), State: String(d.State),
        Salary: String(d.Median), Type: String(d.Type)
    }
})
.then(salaryData => {
    // ***Use salaryData here***
    // It will be an array, so for instance
    for (const entry of salaryData) { // Loop through the array
        // Use `entry.University`, etc., here
    }
})
.catch(error => {
    // Handle/report error
});

The documentation says:

This module provides convenient parsing on top of Fetch.

...so what you get back from csv is a promise, not the actual data, because the process is asynchronous. Hence the then and catch above.

edited May 29 '19 at 13:58

answered May 29 '19 at 12:38

T.J. Crowder

1,031,962
187
1,923
1,875

Thanks a lot. I tied just now. but it shows an error saying that " undefined is not a function (near '....then(SalaryData => {d.Un...')" . here is my new code: var SalaryData = [] d3.csv("Median Salary Integration 2018.csv") .row(function (d) { return { University: String(d.University), State: String(d.State), Salary: String(d.Median), Type: String(d.Type) } }) .then(SalaryData => {d.University,d.State,d.Median,d.Type}) .catch(error => {return error}) – YYYYY May 29 '19 at 12:59
@YYYYY - When I said "Use salaryData here" above, I meant use it **there**. Your code doesn't. I don't know what `d` is meant to be tehre, but it's not `SalaryData` (or `salaryData` re my answer, remember that variables and parameters should start with a lower case character). Your arrow function is incorrect as well, see [this answer](https://stackoverflow.com/a/45754958/157247) for details. Also, don't declare `SalaryData` outside the callback. The call is [**asynchronous**](https://stackoverflow.com/questions/23667086/). – T.J. Crowder May 29 '19 at 13:57

Create a new array from the csv file

1 Answers1