CODEWITHSUNDEEP
javascriptarrayscsvd3.js
j_0101
j_0101

Reputation: 167

Copy data from csv into array in D3

I know this question has been asked before but their solutions dont see to work for me for some reason.

I am trying to populate two arrays with data from a CSV file where:

name,value
alpha,34
beta,12
delta,49
gamma,89

What I am trying now is 

var field1=[];
var field2=[];

d3.csv("data.csv",function(csv){
            csv.map(function(d){
                field1.push(d.name);
                field2.push(+d.value);
            })
        });

console.log("field1",field1);
console.log("field2",field2);

When I view console on my browser I see:

field1 Array [ ] field2 Array [ ]

where:

field1:
Array[0]
  0:"alpha"
  1:"beta"
  2:"delta"
  3:"gamma"

field2:
Array[0]
  0:34
  1:12
  2:49
  3:89

However when I try to access field1[0], I get the value as undefined

field1 undefined

What I guess is happening is field1 array has an array of arrays of "name" column, but I'm not able to access the first element though field[0][0] either. What I get is:

TypeError: field1[0] is undefined

I'm very new to JavaScript and I don't seem to understand why the array is not populated correctly as a 1 dimensional array or if I'm doing something wrong. I am aware that I can iterate through each row while accessing csv per row but I want to store the csv values in array to be used globally in the script.

Links I have gone through are:

But I seem to be missing or overlooking something.. Please help!

Upvotes: 4

Views: 7060

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

The reason is that 

d3.csv("data.csv",function(csv){

is an ajax call so you cannot write something like below (your console log is called before the ajax is completed so you get unexpected results):

var field1=[];
var field2=[];

d3.csv("data.csv",function(csv){
            //executed after successful loading of data
            csv.map(function(d){

                field1.push(d.name);
                field2.push(+d.value);
            })
        });
//called before the loading of AJAX call got completed
console.log("field1",field1);
console.log("field2",field2);

The correct way is:

var field1=[];
var field2=[];

d3.csv("data.csv",function(csv){
            csv.map(function(d){
                field1.push(d.name);
                field2.push(+d.value);
            })
            //called after the AJAX is success
            console.log("field1",field1);
            console.log("field2",field2);
            console.log("field1",field1[0]);
        });

working code here

Hope this helps!

Upvotes: 3

Related Questions