jQueryを使ったAjax入門

レスポンスデータの中の値へのアクセス

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使ったAjaxで「livedoorお天気WEBサービス」のAPIにアクセスした結果、取得できたレスポンスデータの中の値へアクセスする方法について、解説致します。
講師:
04:31

字幕

このレッスンでは jQuery を使ったAjax で Livedoor お天気 Web サービスのAPI にアクセスした結果が取得できたレスポンスデータの中の値へアクセスする方法について解説していきます。まずはダウンロードしてきたこちらの頭が 04_06 から始まるフォルダーの中に入っているこれら3つのファイルをエディターで開いて下さい。そしてこちらがそれらのファイルを開いた状態です。今回はこちらの index.js ファイルをメインに利用していきたいと思います。それでは早速ファイルの中身を確認していきましょう。まず今回のレッスンではこちら側をエディター、そしてこちら側をブラウザーのWeb コンソールを表示している状態となっています。此方の部分では実際にAjax で取得できたレスポンスデータを表示させている形となっています。こちらの Web コンソールを確認しながら実際にこちらの Java Script の方でそのレスポンスデータの中にある個別のデータにアクセスしていきたいと思います。今回、こちらの index.js ファイルの中で注目して頂きたい部分はこちらの下の分部にあるこの done の中つまりリクエストが成功した場合の処理ですね。 此方の中にある此方の部分となります。此方の部分では実際にレスポンスデータの中の個別のデータにアクセスして、それを変数に代入していっています。では順番に見ていきましょう。まず天気予報のエリアですね。エリアの取得方法ですがまず変数 area を作成してそして = で繋いで、この様にdata.location.prefectureと書いていますね。これはどこのデータかというと此方の Web コンソールの中のレスポンスデータの中にあるまずデータ自身がこちらのレスポンスデータ全体を表しますのでデータの中の location ですね。location はこちらにあります。こちらをクリックしてその中にある prefecture ということで此方ですね、今回は「東京都」となっていますね。この「東京都」という文字列がこちらの area に代入されてきます。そして次を見ていきましょう。次は予報日の取得です。予報日に関してはdate_label という変数を作っています。そして = で繋いで今度はdata.forecast そして配列のキーが1番目そして .dateLabel となっていますね。それではこちらのデータの場所も此方のコンソールで見ていきたいと思います。 まずデータはこちらのレスポンスデータ全体を表します。そしてその中にある forecast ですね。forecast がこちらにありますのでクリックします。この forecast はここに書いている通りArray、配列となっていますのでこの配列の値にアクセスしていきます。今回は配列のキーが1番目ですね。ですので、この 1 という所をクリックします。するとこの様に更にデータが表示されてきます。そしてドットが続いてdateLabelつまり forecast という配列の中に格納されているキーが1番目のデータということで、こちらその中にある dateLabel ということでこちらの部分ですね。こちらに格納されている「明日」というテキストを取得してそしてこちらの dateLabel に格納しています。ちなみにこの forecast の中に入っているこの3つのデータ、それぞれがここに書いてある通りオブジェクトになっていますね。オブジェクトの場合はこの様にドットで繋いでそして仮想のデータにアクセスしていきます。この様に自分が欲しい情報をレスポンスデータの中から見つけ出してこの様に順番にデータを取得してそしてそれぞれの変数に格納していってあげます。 これがレスポンスデータの中の値へのアクセスの方法となります。以上でレッスンは終了です。今回は jQuery を使った Ajax でLivedoor お天気 Web サービスのAPI にアクセスした結果取得できたレスポンスデータの中の値へアクセスする方法について解説いたしました。

jQueryを使ったAjax入門

AjaxとはAsynchronous JavaScript + XML の略で、JavaScriptを使って非同期通信を利用しWebサイトのコンテンツを動的に書き換える手法です。このコースではモダンなWebサイト作るうえで必須の技術となっているAjaxjについて、その機能を簡単に実装できるjQueryを使って解説します。

1時間30分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年09月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。