jQueryを使ったAjax入門

配列の中の全データにアクセスする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使ってAjaxを実行し取得したJSONデータの、配列の中にある全てのデータにアクセスする方法について、解説致します。
講師:
05:33

字幕

このレッスンでは jQuery を使ってAjax を実行し取得した JSON データの配列の中にある全てのデータにアクセスする方法について解説していきます。まずはダウンロードしてきたこちらの頭が 03_04 から始まるフォルダーの中に入っているこれら3つのファイルをエディターで開いて下さい。そして、これがそれらのファイルを開いた状態です。今回はこの3つのファイルのうちindex.js ファイルとこちらの data1.json ファイルを使って解説を進めていきます。それでは早速ファイルの中身を見ていきましょう。今回注目して頂きたい部分はこちらの部分となります。Ajax のリクエストが成功して取得できた JSON 形式のデータそれがこちらの data という変数に格納されていますがその data の中に含まれる今回はこの items という配列のデータですね。こちらの配列の中に含まれる全ての要素にアクセスする方法について見ていきたいと思います。それがこちらの部分ですね。では順番に見ていきましょう。まず $. each と書いています。こちらは jQuery の関数となっていてこれを使うことによって配列の中身の要素全てに順番にアクセスしていくことができます。 通常の JavaScript にある for 文を使っても勿論同じことができますがこちらの $.each の方が便利に配列を扱うことができる為今回はこちらを利用します。それではこちらの $.each という関数の使い方を見ていきます。まずこちらの each の後の ( ) の中( ) の中はこのような状態になっていて1つ目の引数に配列そして2つ目の引数に関数を指定しています。そして、まず1つ目の引数には配列要するに、データを順番に見ていきたい配列ですね。ですので、今回は data の変数の中に入っているこの items という配列になります。そして、コンマをおいてその後に関数 function を書きます。そして、{ } ですね。この { } の間に、繰り返し実行したい処理というものを書きます。そしてこの function の後のこの ( ) の中の引数ですがこれは配列の要素を順番に取得していくにあたってまずこちらの index にはその配列の要素のキーが順番に格納されてきてそしてこちらの value にはその配列の要素のデータが格納されてきます。この index と value という変数を使ってこの配列の中にあるデータに順番にアクセスするといった形になります。 ではこちらの部分を見てみましょう。まず変数 product_name というものを作ってあげてそして =そしてその後に value.name と書いていますね。value は先程も言ったようにその配列の中に含まれている要素のデータそのものなんですがまずこの value が何を表しているかと言うとこちらの部分ですね。これを表しています。そして、value のドット中にある name ということでこれですね。要するに、この value.name というのは「ボディソープ」や「へアーシャンプー」、「ヘアーコンディショナー」を指します。この値を順番に取得してくるわけです。そして、それがこの product_name に代入されます。続きまして、こちらの部分でも同様です。product_price という変数を作ってあげて= value.price となっていますね。ですので、value はこれとこれとこれのデータを表していますのでこの value の中の price というのはこちらですね。要するに、600 800 850 という形で順番に取得してくるわけです。そして、最後にこれらの変数を使ってこのように HTML の div タグの中にこの product_name と product_price を1つの文字列にしてそしてこの div タグの中に追加して表示するといった処理をとっています。 それでは実際にこれらのファイルをサーバーに設置してその動作を確認してみたいと思います。これが先程の3つのファイルをサーバー上に設置してそして index.html ファイルにアクセスしている状態です。それではこちらのボタンを押してみましょう。すると、「成功」というダイアログが出てそして、このように表示されてきましたね。先程の JSON の中にある配列の値にそれぞれアクセスしてそして順番にこのように出力されていますね。以上でレッスンは終了です。今回は 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宛までご連絡ください。