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...): stackoverflow.com/questions/14220321/… and stackoverflow.com/questions/23667086/… — T.J. Crowder
– T.J. Crowder, Commented May 29, 2019 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
– T.J. Crowder, Commented May 29, 2019 at 13:59

T.J. Crowder · Accepted Answer · 2019-05-29 13:58:26Z

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, 2019 at 13:58

answered May 29, 2019 at 12:38

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

YYYYY Over a year ago

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})

T.J. Crowder Over a year ago

@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 for details. Also, don't declare SalaryData outside the callback. The call is asynchronous.

Collectives™ on Stack Overflow

Create a new array from the csv file

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related