OpenWeatherAPIで任意の地域の天気を取得 ②

こちらの記事からの続き

セレクトボックスのchangeイベントでajaxを走らせる
php側でapiを叩きデータ取得、jsonでJSへ返す
phpから受け取ったデータを処理、htmlへ表示

の部分を実装してゆきます。

JS
Controller

JS

name = “destination” のセレクトボックスがチェンジしたら、

をトリガーにajax処理が走ります。

  $('[name = "destination"]').on('change', function () {
    var destination = $(this).val();
    
    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      },
      url: '/api/weather',
      type: 'GET',
      data: {
        'destination': destination
      },
      dataType: 'json',
    })
      .done(function (response) {
       
        var $weatherWrap = $('#js_weatherWrap')

        $weatherWrap.html(""); //前回の取得内容をリセット
       
        var block = '<div class="col">'
          + '<p>今のお天気：' + response.data + '</p>'
          + '<p><img src="https://openweathermap.org/img/wn/' + response.icon + '@2x.png"></p>'
          + '</div>';
   
        $weatherWrap.append(block);
      })
      .fail(function () {
        console.log("failed");
      })

・GETで /api/weather にリクエストを飛ばす
・jsonデータを受け取る
・htmlで現在表示している内容をリセット
・受け取ったデータをforeachでhtmlへ追加

という流れになっています。

Controller

ajaxからリクエストを受け取るphp側はこんな感じです

    public function getWeather(Request $request)
    {
        $destination = $request->destination;

        $lat = config('const.positions.' . $destination . '.lat');
        $lon = config('const.positions.' . $destination . '.lon');

        $appid = config('const.api.weather.key');

        $url = "http://api.openweathermap.org/data/2.5/weather/?lat={$lat}&lon={$lon}&appid={$appid}";

       
        $weather_json = file_get_contents($url);
        $weather_array = json_decode($weather_json, true);

        return response()->json(
            [
                'data' => $weather_array['weather'][0]['main'],
                'icon' => $weather_array['weather'][0]['icon'],
            ]
        );
    }

file_get_conentsで対象urlのデータを読み込み、配列に直しています。そして配列から必要なお天気データJSへ返しています。

JSで受け取ったあとの処理は↑のJSファイル、.done 以降に記載の通りです。

これで、無事お天気情報が表示されました！