非同期通信ができません。。

Question

Uncaught ReferenceError: instagram is not defined

Rails初心者です。インスタグラムのような写真投稿アプリを作成しています。投稿の非同期通信を実装中、コンソールに
Uncaught ReferenceError: instagram is not defined

とエラーが発生。
ターミナルの方はjsonを読み込んで動いていますが、非同期通信はできていなく、投稿の際にエラーが発生している状態です。

どなたかご教示いただけると幸いです。。

発生している問題・エラーメッセージ

Uncaught ReferenceError: instagram is not defined

該当のソースコード

$(function(){
  //非同期通信の際に生成されるHTML
  function buildHTML(content){
    var html = `<span class="contents__images">
    <a href="/instagram/${instagram.id}">
    <img class="contents__images__image" src="${data.image.url}">
    <i class="fa fa-heart contents__images__image__icon">
    </i>
    </a>
    </span>`
    return html;
  }

//非同期通信
$('#new_instagram').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: 'post',
      data: formData,
      dataType: 'text',
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.contents__all').append(html);
      $('#new_instagram')[0].reset();
      $('#new_instagram').val('');
    })
    .fail(function(){
      alert('error');
    })
    .always(function(){
      $('.form__box__send-btn').prop('disabled', false);
    })
  })
})

def index
    @instagram = Instagram.new
    if user_signed_in?
      @instagrams = Instagram.order(created_at: :desc)
    else redirect_to new_user_session_path
    end
  end

  def new
    @instagram = Instagram.new
  end

  def create
    if @instagram = Instagram.create(image: instagram_params[:image], text: instagram_params[:text], user_id: current_user.id)
      respond_to do |format|
        #format.html {redirect_to instagram_index_path}
         format.json
       end
      else redirect_to new_instagaram_path
    end
  end

補足情報（FW/ツールのバージョンなど）

buildHTMLの中の${instagram.id}のinstagram部分がnot definedになっていました。念の為、コントローラも記載しておきます。

Comments

[退会済みユーザー]

jsでinstagramという変数を定義していないのではないでしょうか。

[yuna_]

ご回答ありがとうございます。
jbuilderの方で、
json.text @instagram.text
json.image @instagram.image
json.user_id @instagram.user.id
json.id @instagram.id

としているのですが、instagramという変数を別に定義しなければいけないのでしょうか。。他で非同期通信を実装した際、同じようにしましたが、エラーは特に出ませんでした。。

[m.ts10806]

jsファイルなら無理でしょうね。

[退会済みユーザー]

rubyの変数とjsの変数は別の世界なので相互に扱えませんがそこは大丈夫ですか？

Answer 1

私のケアレスミスでした。引数で解決しました。ご回答いただいた方、ありがとうございます。

Answer 2

デベロッパーツールで何が入っているか確認して、どう使えばいいか考えてみましょう。

  function buildHTML(content){
    console.log(content); // デベロッパーツールで何が入っているか確認してみましょう。
    return '';// とりあえず出力なしにしてエラーが出ないように（確認のため）
    var html = `<span class="contents__images">
    <a href="/instagram/${instagram.id}">
    <img class="contents__images__image" src="${data.image.url}">
    <i class="fa fa-heart contents__images__image__icon">
    </i>
    </a>
    </span>`
    return html;
  }

【【初心者向け】コンソールによるJavascriptのエラー表示方法】
https://eng-entrance.com/javascript-display-error