テーブルの中のデータをハッシュの配列で取り出す考え方

前提・実現したいこと

テーブルの中に格納している複数のデータを、ハッシュ形式の配列で取り出した上で、ビュー画面上でjavascriptを使用して動かしたい。
javascriptで動かす上で、データはハッシュキーを持った配列にしたい。

現状のやり方

Size テーブル

id	length	width	weight	timestamp
1	15.0	7.5	12.2	***
2	16.0	8.0	11.5	***
3	17.0	8.4	17.0	***

この時、インスタンスを@sizeとして、@size.select(:length, :width)なので、
ターミナルの上では、[{length: 15.0, width: 7.5}, {length: 16.0, width: 8.0}, length: 17.0, width: 8.4}]と表示させることができますが、
HTMLではSize::ActiveRecord_AssociationRelation:0x00*******としか表示されない。

haml
1#hidden_info
2 - @size.select(:question, :answer)

javascript
1var test = document.getElementById('hidden_info');
2//この時にconsole.log(test)で見てもSize::ActiveRecord_AssociationRelation:0x00*******としか表示されない

この状態で、javascriptに、私が望むハッシュの配列の変数として渡すことがで来ているのかできていないのか？が全くわからないです。
多分、Rubyの形式のデータをjavascriptが使うことができるようにはならないので、このまま代入してもダメなんだろうなとは思っています。

javascriptで動かすのに、ランダムなレコード番号の２つのキーのそれぞれの値を呼び出して表示させるという↓のようなことを考えていますが、

javascript
1var display1 = document.getElementById('side1')
2var display2 = document.getElementById('side2')
3var num = Math.floor(Math.random() * test.length);
4//test.lengthは特にエラーが出ていないが、console.logではundefined
5display1.innerHTML = test[num]['length'];
6//lengthというプロパティがないと表示される
7display2.innerHTML = test[num]['width'];
8//widthというプロパティがないと表示される