tagをcreateしたときに中間テーブルgroup_tagsにtag_idを自動登録したい。JSON形式・nativeJavaScriptを使用しています。

Question

中間テーブルgroup_tagsにidを登録したい。

環境

ruby 2.5.1

rails 6.0.3.2

アソシエーション

:groupモデル

  has_many:group_tags
  has_many:tags,through: :group_tags

:group_tag中間モデル

  belongs_to :group
  belongs_to :tag

:tagモデル

  has_many:group_tags
  has_many:groups,through: :group_tags

やりたいこと

tagをcreateしたときに中間テーブルgroup_tagsにidを自動登録したい

tagをcreateする際にstrong params を仲介して中間テーブルgroup_tagsにもtag_idを書き込みます。
下記はうまくいきました。

:tags_controller.rb

  def create
    Tag.create(tag_params)
  end

  private
  def tag_params
    params.permit(:title,group_ids:[])
  end

:params

{"authenticity_token"=>"Bm7Oa...", "title"=>"aaaaa", "commit"=>"作成", "group_ids"=>["1"], "controller"=>"tags", "action"=>"create"}

:tag_params

{"title"=>"aaaaa", "group_ids"=>["1"]}

これをnativeJavaScriptで非同期させたいのですが、

:tags_controller.rb

  def create
    @tag=Tag.create(tag_params)
    respond_to do |format|
      format.html {redirect_to :root}
      format.json {render json: @tag}
    end
  end

  private
  def tag_params
    params.permit(:title,group_ids:[])
  end

form_tag_create.addEventListener('submit',function(e){

  e.preventDefault();

  let method=this.getAttribute("method");
  let url=this.getAttribute("action");
  let formData=new FormData(this);
  let jsonData={};

  formData.forEach(function(value, key){
    if(key.endsWith("_ids[]")){
      jsonData[key]=[value];
    }else{
      jsonData[key]=value;
    }
  });

  let json=JSON.stringify(jsonData);

  let xhr=new XMLHttpRequest();
  xhr.open(method,`${url}.json`);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(json);

});

:params

{"authenticity_token"=>"Bm7Oa...", "title"=>"bbbbb", "group_ids[]"=>["1"], "controller"=>"tags", "action"=>"create", "format"=>"json", "tag"=>{"title"=>"bbbbb"}}

:tag_params

{"title"=>"bbbbb"}

上記ではtagは登録されるのですが、中間テーブルgroup_tagsには登録されませんでした。
どのように修正すればよいのか、詳しい方がいらっしゃいましたら幸いです。
jqueryは訳有って使用できません。
javaScripは後ほど関数にして他でも使用予定です。
ご存じの方がいらっしゃいましたら、以上よろしくお願いいたします。

Answer 1

修正前
  formData.forEach(function(value, key){
    if(key.endsWith("_ids[]")){
      jsonData[key]=[value];
    }else{
      jsonData[key]=value;
    }
  });

修正後
  formData.forEach(function(value, key){
    if(key.endsWith("_ids[]")){
      jsonData[key.replace('[]','')]=[value];　//この行のみ変更
    }else{
      jsonData[key]=value;
    }
  });

以上でうまくいきました。
お騒がせしました。