@minnierapi (ニミ)posted at 2022-02-10

controllerをjsに渡すcode

Q&A

PHP JavaScript Laravel Ajax GoogleMapsAPI

解決したいこと

こんにちは。
現在、laravelでgoogle maps APIを利用してDBからデータを取り出してマップに表示するアプリを作成しています。
controllerからjsファイルのajax通信を行なっている最中ですが、ブラウザでは「undifind」をアラートが表記されています。
controllerでは指定したカラムの値を取り出せていたのですが、jsファイルでの変数「$saunas」の記述方法が分からないため停滞しています。
正しい表記の仕方が分からなかったため、どなたか教えて頂けないでしょうか？
スクショとcodeの一部を添付します。

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

controller

  public function Ajax()
  {
    $saunas = Sauna::select('id','name','address','lat','lng','url')->get();
      return $saunas;
  }
}

js

$(function(){
    $.ajax({
      type: "GET",
      url: "http://localhost:8888/saunaAjax",
      dataType: "json",
      success: function(data){
        markerD = data;
        setMarker(markerD);
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        alert('Error : ' + errorThrown);
      }
    });
  });

1Answer

@blue32a posted at 2022-02-10

      success: function(data){
        markerD = data;
        setMarker(markerD);
      },

このdataにどのようなデータが入っているか確認してみましたか？

ajaxでのデータのやり取りは、どのようなリクエストをしてどのようなレスポンスがあったのか、を知る必要があります。
ブラウザの開発者ツール（デベロッパーツール）を使うとそれを確認することができます。
（ChromeブラウザならデベロッパーツールのNetworkタブ）

ちなみに{{ }}はBladeテンプレートの構文なので、jsファイルでは使用できません。

コントローラ側の処理で、APIでEloquentモデルを使うにはどうするか、という点はこちらにドキュメントがあります。

0Like

Comments

@minnierapi
Questioner
ご回答有難うございます。
[data]をconsole.logメソッドで確認して見た結果ブラウザに何も表示されませんでした。

public function toArray($request)
{
return [
'id' => $this->id,
'name' => $this->name,
'address' => $this->address,
'lat' => $this->lat,
'lng' => $this->lng,
'url' => $this->url,
];
}
}

ドキュメントを読ませて頂いた結果上記のような形になったのですが、success: function(data)の(data)には何を記述すれば全てのデータが取れるのでしょうか？
分かりづらい質問で申し訳ありません。
@minnierapi
Questioner
@blue32a　さん
自己解決致しました。有難うございました。

Are you sure you want to delete the question?