jQueryのajaxでデータを取得する
変数の設定
APIの準備が出来たのでプログラムの作成に移ります。
今回インターンシップに参加して作ったプログラムを例に進めていきます。
まず初めに変数の設定を行います。APIkeyは隠してあります。
WeatherService.js
defaultApiUrlはAPIの種類が変わっても共通で使える部分を変数で使えるように設定してあります。
defaultCityではカレンダーから都市名を受け取っているため、’Tokyo’などの文字を入れて使用してください。
scheduedDateも同様にカレンダーから日付を受け取っているため、”9/15″などの日付を入れて使用してください。
また、cityには受けとった天候データ、currentには日にちデータ、UNITには温度データなどを入れるのに使用しています。
ajaxで天気を取得
変数の設定が終わったらajaxの部分のプログラムを作成します。
WeatherService.js
DayWeather
この関数では、ajaxで天気の情報を取得します。
取得できた場合一番現在の時間に近い２４つのデータの日付を確認し、予定日と日付が同じデータをHTMLに描画します。
この中でcreateDate、setWeatherData、domDayWeatherWriteは別の関数なのでこのあと紹介します。
CreateDate
createDateはAPIから受け取った日付データを普段見る使いやすい形に直すための関数です。
SetWeatherData
setWeatherDataはAPIから受け取ったデータを使いやすく、見やすいように整理する関数です。
DomDayWeatherWrite
domDayWeatherWriteは受け取ったデータと配列内での位置を貰うことで特定の日付のデータをHTMLに表示するための関数です。
iconIdの変数では天気予報のデータの中にある天気に合わせたアイコンの情報を取得し、APIで表示しています。
mainScreen.html
id weather-reportの場所に天気の情報が挿入されることになります。
Bodyタグの一番下にjQueryの保存場所と作ったjsファイルを指定をします。
これでhtml内のweather-reportのidの場所に天気の情報を表示することが出来ます。
終わりに
拙い文章をここまでご覧いただき、誠にありがとうございました。
APIには色々な種類があり、使いこなせるととても便利なので、是非使っていってください。
