jQueryを使ったAjax入門

オブジェクトの中の全データにアクセスする

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

ぜひご覧ください。

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

字幕

このレッスンでは jQuery を使ってAjax を実行し取得した JSON データのオブジェクトの中にある全てのデータにアクセスする方法について解説していきます。まずはダウンロードしてきたこちらの頭が 03_05 から始まるフォルダーの中に入っているこれら3つのファイルをエディターで開いて下さい。そして、これがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきます。この3つのファイルのうち今回利用するのはこちらの index.js ファイルとそしてこちらの data1.json ファイルとなります。それでは早速ファイルの中身を見ていきましょう。今回注目して頂きたいのがこちらの index.js ファイルの中にあるこちらの $.each から始まる部分ですね。こちらの部分となります。そして今回は JSON の中にあるオブジェクトにアクセスしていく処理ですね。今回はそのオブジェクトの中にある全てのデータにアクセスしていくということでそれについての処理がこちらの $.each からそしてこちらの部分までとなります。それでは順番に見ていきましょう。まず JSON の中にあるオブジェクトですがそれは例えばこちらの部分となります。 この { から} までこれがオブジェクトを表しているのですがこのオブジェクトの中のデータということでこれら3つのデータのことを指します。今回はこのオブジェクトの中に含まれているデータ全てにアクセスする方法を見ていきます。それでは index.js に戻ってまず、その為には $.each を使います。これは jQuery 独自の関数となっていてこれを利用することによって配列やオブジェクトの中に含まれている要素全てに対して順番にアクセスしていくことが可能となります。そして $.each の後に( ) ですね。そして、その ) がここにあります。そしてこの ( ) の中に2つの引数があります。1つは item今回はその上にある $.each の中のfunction の中にある引数の1つとなっています。この上の $.each はこのようにdata.items が配列に指定されていますがこれはこの部分を表します。ですので、こちらの item にはこの中に含まれている1つ1つのデータつまりはこれらオブジェクト1つ1つのことを指します。それが順番にこの item の中に入って来るわけですね。その item の中に入ってくるオブジェクトのデータを指定しているわけです。 そして、その次の引数にfunction を指定していますね。その function の { }} はこちらになりますがその中に含まれるこちらの処理ここまでの処理ですね。ここまでの処理が実際にオブジェクトの中のデータの数に合わせて繰り返し実行されるプログラムとなっています。それでは順番に見ていきましょう。まずはこちらの部分で1つ変数の準備をしていますね。まずは itemName としています。そしてその次に Switch を使って条件分岐を行っています。まず Switch と書いて ( ) ですね。その ( ) の中には key と入れています。この key というのはこちらの function の引数の1つですね。これはオブジェクトの要素のキー要するに、例えばこの code とかname とか price が入ってきます。この key の中に格納されている内容によってこのように条件分岐を起こします。そして、例えばこの key の中に入っているのがcode だった場合はこの変数 itemName に「商品コード」という日本語の文字列を代入してあります。同じように、 name だったら「商品名」price だったら「料金」という風にしています。 そして、この条件分岐が終わってこの変数 itemName にそれぞれに対応した日本語の文字列が格納されたら最後にこれを使ってこちらの部分です。HTML の div タグに対して先程の変数 itemName に格納された名前とそして :そして、変数 valこれはこちらの function の2つ目の引数ですね。この変数 val にはこのオブジェクトの中の値ですね。要するに code だったらコチラname だったら「ボディソープ」price だったら「600」といった実際の値が格納されてくる変数となっています。これを1つの文字列としてそして div の中に追加して表示するという形になっています。これがオブジェクトの中にある全データに順番にアクセスする方法となります。最後に、この .each ですね。オブジェクトの中に含まれているデータに順番にアクセスしていくという命令に対して更にそれを $.each の data.Items で囲ってあげることによってこちらの items の中の配列に含まれている更にオブジェクトの中のこれらのデータに順番に全てアクセスしていくといった意味になります。それではこの状態でこれらのファイルをサーバーに設置してその動作をブラウザで確認してみたいと思います。 これが、それらのファイルをサーバーに設置してそして index.html ファイルにアクセスした状態となっています。では、こちらの「外部データを取得する」というボタンを押してみましょう。すると、このようにAjax のリクエストが成功してその結果がこのような形になりましたね。きちんとそれぞれのオブジェクトの中に格納されているデータがこのように出力されてきました。更にそれを囲むような形で配列の中にある全てのオブジェクトにアクセスするといった命令を書いているのでこのように JSON の中の items という配列の中に含まれているこの3つのオブジェクト全てにアクセスできている、といった形になります。以上でレッスンは終了です。今回は 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宛までご連絡ください。