JavaScriptでJSONデータの数字を配列に代入すると文字列になるようだ

jQuery・JS

JSONデータを読み込んで配列に入れて、それを使おうとしたときに数値として利用できなかったので、その原因と使える状態にした時のメモ。

Chart.json

{"東京":"13159388","大阪":"8865245","神奈川":"9048331","愛知":"7410719","福岡":"5071968","北海道":"5506419","埼玉":"7194556"}

下のコードは、上のJSONデータを読み込んで配列に代入していくプログラムです。実行するとコンソールには、isNaNで非数値であればtrueと表示されるようになっています。数値(v)の値は、falseと表示されます。

var jsonData = [];
$.getJSON('http://localhost/chart.json')
  .done(function(data) {
    $.each(data, function(k, v) {
      console.log(k + ':' + isNaN(k) + ',' + v + ':' + isNaN(v));
      /*
      if(!isNaN(v)) {
        var v = parseInt(v);
      }
      */
      jsonData.push([k,v]);
    });
    console.dir(jsonData);
  })
  .fail(function(data) {
    console.log('error');
  });
}
<input type="button" onclick="jsonToArray()" />

この段階であれば、数値が代入されて全く問題ないと思ってしまうのですが、console.dir(jsonData)で配列を確認すると数値をダブルクォーテーションで囲って表示されています。これが原因で数値を利用できなかったようです。

jsondata

そこで、parseInt(v)を使い数値にしてから配列に代入して、console.dir(jsonData)を表示してみるとダブルクォーテーションが無くなっています。この結果、配列に代入した値を数値として利用できるようになりました。

jsondata1

スポンサーリンク

コメント

タイトルとURLをコピーしました