JSONで渡した配列データをjavascriptで運用するために見落としていること？

Question

前提・実現したいこと

データベースからJSON形式で取得しているデータをjavascriptで動かしたいが、
思うようには出来ない。見落としている点、誤解している点などがあればご指摘いただけませんか？

データベースを配列データで取得する方法に関して、ご教授いただければと思います。
javascriptは先に作っているのですが、ハッシュキーを持った配列データを取得することを前提にしていました。ハッシュテーブルという名称から、また、コンソールに表示されるデータをみて、その形式で容易に取得できると誤解していました。。。。

発生している問題・該当のソースコード

def index
 @group = Group.find(params[:group_id])
 @panels = @group.panels.includes(:user)
 @quanda = @panels.to_json
end

//このデータ自体はコントローラーで定義されコンソールにも表示されている
#hidden_info
 = @qanda

//このコードはviewファイルに直接書き込まれています。
var words = document.getElementById('hidden_info');
console.log(words);
//コンソール上ではデータがあることを確認している
//"[{"id":1, "qqq":"sampletext_qqq", "aaa":"sampletext_aaa"}, {以下省略}]"

console.log(words.length);
//コンソールではundefinedとなり、配列として認識されていない
front.innerHTML = words[1]["qqq"]:
//コンソールではcannot read property 'qqq'とやはり認識されていない

確認しなければならないこと？？

JSONに関して全く知識が足りていないので、渡しているデータの形式に問題があるのかなと考えています。id="hidden_info"の情報を取得するときのコンソールの表示にダブルクオテーションがついていることから、ひょっとしてこれはStringで、配列としてデータを取得できていないのかな？
とも考えています。

以下URLを参考にこの中の内容を流し読んで作成していますが、
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON

読み返すとやはり文字列であるってことなのかなと考えていますが、
では、どのような操作をコントローラーで操作すれば文字列ではなく、また作ったjavascriptのコードで動かすためにキーを持ったハッシュの配列データ受け取れるのでしょうか？

また、もし現状のデータのままやりようがあるのであれば、jsで理解すべきポイントがあると思うのですが何を調べたら良いでしょうか？

Answer 1

JSONに関して全く知識が足りていないので、渡しているデータの形式に問題があるのかなと考えています。

そちらは質問内容の情報だけでは確認できませんが、受け取り方に問題があるのは間違いありません。

var words = document.getElementById('hidden_info');とした場合、wordsに入るものはHTML要素です。「HTML要素に書かれた文字列を回収する」→「文字列をJSON.parseしてデータ構造を再構築する」の2段階を経ないと、JavaScriptからデータを使うことはできません。

Comments

[Malson]

maisumakun様、
ありがとうございます。勉強になります。

Answer 2

id=hidden_infoの要素がinput系のデータならword.valueを
div的な要素ならword.textContentを参照してください
JSONデータをオブジェクトに戻すときはJSON.parse(word.xxx)