コース: Ajax 入門
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
配列の中の全データにアクセスする
このレッスンでは jQuery を使って Ajax を実行し 取得した JSON データの配列の中にある 全てのデータにアクセスする 方法について解説していきます。 まずはダウンロードしてきた こちらの頭が 03_04 から始まる フォルダーの中に入っているこれら３つの ファイルをエディターで開いて下さい。 そして、これがそれらのファイルを 開いた状態です。 今回はこの３つのファイルのうち index.js ファイルと こちらの data1.json ファイルを使って 解説を進めていきます。 それでは早速 ファイルの中身を見ていきましょう。 今回注目して頂きたい部分は こちらの部分となります。 Ajax のリクエストが成功して 取得できた JSON 形式のデータ それがこちらの data という変数に 格納されていますが その data の中に含まれる今回は この items という配列のデータですね。 こちらの配列の中に含まれる 全ての要素にアクセスする方法について 見ていきたいと思います。 それがこちらの部分ですね。 では順番に見ていきましょう。 まず $. each と書いています。 こちらは jQuery の関数となっていて これを使うことによって 配列の中身の要素全てに順番に アクセスしていくことができます。 通常の JavaScript にある for 文を使っても 勿論同じことができますが こちらの $.each の方が 便利に配列を扱うことができる為 今回はこちらを利用します。 それではこちらの $.each という 関数の使い方を見ていきます。 まずこちらの each の後の ( ) の中 ( ) の中はこのような状態になっていて １つ目の引数に配列 そして２つ目の引数に関数を 指定しています。 そして、まず１つ目の引数には配列 要するに、データを順番に 見ていきたい配列ですね。 ですので、今回は data の変数の中に 入っているこの items と いう配列になります。 そして、コンマをおいて その後に関数 function を書きます。 そして、{ } ですね。 この { } の間に、繰り返し実行したい 処理というものを書きます。 そしてこの function の後の この ( ) の中の引数ですが これは配列の要素を順番に…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。