Stimulusを使って、html上のデータをjavascriptに渡したい

Question

実現したいこと

現在、Ruby on railsを用いて、地点データをgoogle map上に一覧表示するアプリを制作しています。
そのために、モデルで保存されている地点のデータをgoogle mapを表示するためのJavascriptのコードに受け渡す必要があります。

発生している問題・分からないこと

railsのデータをjavascriptに受け渡す方法を調べたところ、まずはhtmlにデータを受け渡し、そこからjavascriptに渡すという方法が出てきました。

そこで、以下のhtml.erbにおいて、divタグの中に
data-map-points-value="<%= ＠point1.to_json %>"
と記載して、rails controller上でモデルから取り出したデータ@point1をJSON化したものを、
htmlの中に埋め込みました。

結果、htmlでは、以下のものがdata-map-points-valueとして設定されているはずです。
{"id":1,"post_id":4,"title":"ほげほげ","content":"ほげほげ","position":1,"lat":"35.689481","lng":"139.691686","country_id":153,"prefecture_id":35,"created_at":"2024-11-06T12:47:10.620Z","updated_at":"2024-11-12T01:34:57.561Z"}

その上で、stimulusのmap_controllerで、
console.log(this.pointsValue)としたのですが、
コンソールには
{ }
としか表示されません。

Stimulusによるhtmlとjavascriptの接続方法をどこかで間違えているのかなと思うのですが、
調べても解決に至らず、ご質問させていただきました。
よろしくお願いします。

該当のソースコード

<div id="data-reciever" data-controller="map" 
data-map-target="pointsDataReciever" 
data-map-points-value="<%= @point1.to_json %>">
</div> 

<div class="leaflet-container" data-controller="map"
data-map-target="placeholder"
style="height: 800px; width: 800px;">
</div>

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    static targets = ["placeholder", "pointsDataReciever"]
    static values = { points: String }
 
    connect() { 
    console.log (this.pointsValue);
    }
}

  def show
    @point1 = @points.find_by(position:1)
  end

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

https://stimulus.hotwired.dev/handbook/managing-state
を参考に、他の方法として以下も試してみました。

具体的には、htmlのdivタグに、

data-map-points="<%= @point1.to_json %>"

と追記し、その上でmap_controllerを

var pointsGet = this.data.get('points')
console.log (pointsGet);
console.log (this.element.dataset.points);

としました。しかしコンソールではそれぞれ
null
undefined
となってしまい、解決しませんでした...

補足

● バージョン
ruby 3.2.4
rails 7.0.8.4
stimulus rails 1.3.4

Answer 1

自己解決しました。
targetが二つあったので、targetを一つに統一するとうまくできました。

ただ、targetが何か悪いことをしていたのだとは分かりましたが、なぜtargetが複数だと機能しなかったのかは分かりません...
どなたかお分かりになる方がいればお教えいただけると助かります。