コース: Ajax 入門
今すぐ登録して、24,700件以上登録されている、業界エキスパート指導のコースを受講しましょう。
オブジェクトの中の全データにアクセスする
このレッスンでは jQuery を使って Ajax を実行し 取得した JSON データのオブジェクトの 中にある全てのデータに アクセスする方法について解説していきます。 まずはダウンロードしてきた こちらの頭が 03_05 から始まる フォルダーの中に入っているこれら３つの ファイルをエディターで開いて下さい。 そして、これがそれらのファイルを 開いた状態です。 これらのファイルを使って今回の レッスンの解説を進めていきます。 この３つのファイルのうち 今回利用するのは こちらの index.js ファイルと そしてこちらの data1.json ファイルと なります。 それでは早速 ファイルの中身を見ていきましょう。 今回注目して頂きたいのが こちらの index.js ファイルの中にある こちらの $.each から始まる部分ですね。 こちらの部分となります。 そして今回は JSON の中にある オブジェクトにアクセスしていく処理ですね。 今回はそのオブジェクトの中にある 全てのデータにアクセスしていくということで それについての処理が こちらの $.each から そしてこちらの部分までとなります。 それでは順番に見ていきましょう。 まず JSON の中にあるオブジェクトですが それは例えばこちらの部分となります。 この { から } まで これがオブジェクトを表しているのですが このオブジェクトの中のデータということで これら３つのデータのことを指します。 今回はこのオブジェクトの中に 含まれているデータ全てに アクセスする方法を見ていきます。 それでは index.js に戻って まず、その為には $.each を使います。 これは jQuery 独自の関数となっていて これを利用することによって 配列やオブジェクトの中に 含まれている要素全てに対して 順番にアクセスしていくことが 可能となります。 そして $.each の後に ( ) ですね。 そして、その ) がここにあります。 そしてこの ( ) の中に ２つの引数があります。 １つは item 今回はその上にある $.each の中の function の中にある引数の １つとなっています。 この上の $.each はこのように data.items が配列に指定されていますが…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。