javascriptで配列がおかしい？

Question

D3.jsのCSV呼び出し機能でCSVの中身を配列に入れたいのですが、どうも普通に入れるときと違うものになってしまうようです。

Chart.jsで表示させるための配列なのですが、chart.jsのdataプロパティに下記コードで作成した配列を入れてもエラーになってしまうため気づきました。

var csvFilePath = './data.csv';
var totalArray  = new Array();
var daysArray   = new Array();

var temp = [134,134,4134,534,656,7574,5555];

d3.csv(csvFilePath, function (error, data){
  data.forEach(function(element) {
    totalArray.push(parseInt(element["TOTAL"]));
    daysArray.push(element["days"]);
  }, this);
});
console.log(temp);
console.log(totalArray);
console.log(daysArray);

CSVファイルは以下のような感じです。

,days,TOTAL
0,2017-09-03,6000

上記のコードで実行すると、Chromeのコンソール上で画像のように表示されてしまいます。（中身のデータが違うかもしれませんが気にしないでください。）

tempの[134, 134, 4134, 534, 656, 7574, 5555]のように表示されないのが不思議です。
typeof element["days"]ではちゃんとstringsですし、それをpushしているだけなのになぜこうなってしまうんでしょうか？
普通の1次元配列のようにする方法がありましたらご教示ください。
宜しくお願い致します。

Answer 1

下記のようにしても同じ結果ですか？

  data.forEach(function(element) {
    totalArray.push(parseInt(element["TOTAL"]));
    daysArray.push(element["days"]);
  }, this);
console.log(totalArray);
console.log(daysArray);

Comments

[kurosuke___]

d3.csvのコールバック内でconsole.log();するということであってますでしょうか？
そのようにしましたら、ちゃんと配列っぽくなりました！

[kei344]

詳しくはありませんが、d3.csvは関数名から多分非同期で動いているものだと思います。
外にある console.log は非同期が終わる前に表示を行うため、[]が表示され、コンソールに表示する前に中身が間に合ったためにそういった表示になっているのだと思います。（そういう質問もteratailで見た覚えがあります）

【Chromeのconsole.logの謎 - はなちん C-x C-c】
http://d.hatena.ne.jp/h6n/20111209/1323415222

[kurosuke___]

なるほど、非同期でしたか・・・
ということはchart.jsでプロットするときも、先にプロットされてしまったら、そりゃあ中身が無いので変なことになるはずですね。

[kei344]

chart.jsにCSVのロード機能ってありましたっけ？それはともかく console.log の位置の問題なので確認を「データが入った後」にすればよいだけですよ。

[kurosuke___]

D3.jsでcsvを読み込んでchart.jsで使う感じにしています。
単純にd3.csv()のコールバックの中にプロット処理も書けばよかったんですね。
解決しました！
ありがとうございました！

Answer 2

JavaScriptの配列を展開するとき、配列が入っている順番で処理されないのが仕様のはずです。順番が関係ある場合は、jQueryの$.map()を使うとインデックスの順番通りに処理されたかと思います。
違ったらすみません。

Comments

[kurosuke___]

回答ありがとうございます！
jQueryのmapですね、調べてみます。