jQueryを使ったAjax入門

入れ子になった値にアクセスする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使ってAjaxを実行し取得したJSONデータの、入れ子になった値にアクセスする方法について、解説致します。
講師:
04:01

字幕

このレッスンでは jQuery を使ってAjax を実行し取得した Json データの入れ子になった値にアクセスする方法について解説していきます。まずはダウンロードしてきた此方の頭が 03_03 から始まるフォルダーの中に入っているこれら3つのファイルをエディターで開いて下さい。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。今回はこの3つのファイルの内この index.js ファイルとこちらの data1.json ファイルを使って解説を進めます。それでは早速ファイルの中身を見ていきましょう。今回注目してただきたい部分はこちらの index.js ファイルの中の此方の部分ですね。「入れ子になった値にアクセス」と書いている部分となります。では順番に見ていきましょう。まず変数 bodysoap_price というものを作ってあげています。そして = で繋いで、そしてその後に、その変数に代入する値を持ってきます。今回はその値が data.items(0).priceと書いていますね。これは Ajax のリクエストが成功してそしてその結果として戻ってきたJson 形式のデータが格納されているこちらの変数 dataの中にあるdata ということになります。 では見ていきましょう。まず data というものがあってそして .items ですね。探してみますと、ここにitems というものがありますね。それの (0) です。この括弧ですが、配列を表します。こちらの Json の中もこの様にこの items の括弧の中に3つこの様にデータがありますね。この配列の中の1つの要素にアクセスしています。要するに今回は0番目ですので0、1、2 ということでこちらのデータが0番目になります。そして更にドットですね。更にその中のprice ということなので一番目のデータの中の priceということで今回はこの値600 という意味になります。この 600 という数値のデータがこの bodysoap_price という変数に格納されてきます。この様にしてドットを使って一階層ずつおりていくことによって最終的に取得したいデータにアクセスすることができるわけです。最後にこちらの部分でHTML ファイルの div タグの中に「ボディソープ」そして今回の 600 ですね。「ボディソープ 600 円」という文字列をdiv タグの中に追加して表示させようとしています。それでは実際にこれらのファイルをサーバー上に設置してその動作を確認してみたいと思います。 これが先程の3つのファイルをサーバーに設置してそして index.html ファイルにアクセスしている状態です。それではこちらのボタンをクリックしてみましょう。するとダイアログで「成功」と出てOK を押すとこの様に表示されてきましたね。「ボディソープ 600 円」ということできちんと先程の入れ子になったデータにアクセスできていることがわかります。以上でレッスンは終了です。今回は jQuery を使ってAjax を実行し取得した Json データの入れ子になった値にアクセスする方法について解説いたしました。

jQueryを使ったAjax入門

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

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

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

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

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