各店舗のデータを配列で格納したオブジェクトが「shibuya」や「ohsaka」です。「name」「adress」ときて「telnum」が電話番号ですが、その下の「map」には謎の文字の羅列。これは、GoogleMapを切り替えるためのものです。src=”https://www.google.com/maps/embed?pb=」ぐらいまでは共通なのですね(たぶん)。ファイルをキレイにするために、それ以下の文字列を切り替える形で実装します。いうわけで以上が今回の例でもJSONデータの項目です。見てわかるとおり、JSONならとても人間が理解しやすい書き方ができます。JSONデータを抽出するjQueryを書きましょう。サンプルjQueryざっと説明すると、JSONデータをループさせて必要な領域に挿入しているだけです。//初期選択値をリセットこれより上の行で変数trgにselect要素のidを代入しています。このselect要素の選択を.val()で強制的に操作していることになります。'0');}addMapはjQueryで作られた空のiframe要素ですが、src=””を指定した状態で非表示にしておきます。後で出てきますがmapurlは前述の「埋め込みGooglemapの末尾の文字列」です。対象のエリアにあるiframe要素の一番最初のものが.remove()で消去されて、先ほどの$addMapがshow()で出現します。ここまでの処理を関数呼び出し時に行うのが関数fadeMapです。//jsonファイルのadressキーの値tel.text(shopdata[areacode].telnum);//jsonファイルのtelnumキーの値fadeMap(shopdata[areacode].map);//jsonファイルのmapキーの値});}最初らへんで、テキストを入れ替える場所を定めて変数に入れておきます。その下の$.each()から処理が始まるわけなんですが、each()がオブジェクトに対して処理を行うのに対し、$.eachは今回だとJSONデータの配列に対して連続した処理を行います。値){~})第二引数の関数の「値」は、ループ中の「現在処理中の値」を表す変数です。shopdataがそれですね。先ほど掲載したJSONファイルの「”tokyo-shibuya”~”ohsaka”配列」が順にここに入ります。その下で、先ほど定めた任意の場所へJSONデータの値を入れています。ここではtext()を使って書き換えますが、テキストの内容を取り出すために先ほどのshopdataから値を取り出します。これはJSONデータのとおり、配列でしたね。「[areacode]」でオブジェクト名を指定して値を引き出していますが、これは関数呼び出し時にわかるので後にします。ちなみにしれっと前項のfadeMap関数を呼び出しています。これもshopdata[areacode]を使っています。/&gt;').appendTo('div.adress').text('店舗データをロードできませんでした。/&gt;').appendTo('div.adress').text('店舗データをロードできませんでした。');});});このtrgはちょっと前に作った変数で、select要素が代入されているものでした。onでイベントの感知をして処理を発動させます。STUDIOselect要素が変更される度に処理が始まります。変数mapareaにGooglemapを表示させるため、対象となる領域を代入します。そこに.append()を使ってGooglemap用のiframeをぶち込みます。この時点では何のページも参照していないので、表示されていません。このGooglemap用iframeを変数に代入して後で使えるようにしておきます。この変数addMapとmapareaはどこで使うかというと、Googlemap切り替え用の関数fadeMapの中です。その下で変数areacode変数を設定しています。これは変更後のoption要素のvalue=””値を取得し、代入しています。これがJSONデータを引っ張ってくる大事な要素となります。/&gt;').appendTo('div.adress').text('店舗データをロードできませんでした。/&gt;').appendTo('div.adress').text('店舗データをロードできませんでした。');});第一引数にJSONファイルのURL、第二引数に関数を書きます。この関数に渡される変数dataには、第一引数で指定したファイルの中身、つまり処理をするデータが入っています。ここで、さきほど説明した、関数writeTable()を呼び出します。この関数にdata変数に入っているJSONデータと、選択したoption要素の「value=””値」が代入されているareacode変数を渡します。選択したoption要素value=””値が、JSONデータの配列を格納しているオブジェクトの名前と一致することで関数writeTableの「shopdata[areacode].telnum」などの箇所で値が呼び出せることになります。"これは【新宿店】の住所です。"これは【新宿店】の住所です。//←これ}03-2222-2222が呼び出せます。$.getでデータが出力出来なかった時の処理.fail()エラーが出た時の処理を記述することができます。$.getに続けて、「.fail()」を使いましょう。この中にfunction(){}と書き、そこに綴った処理が、JSONデータを取得できなかったときに実行されます。例ではpタグをappendしていますが、これはエラーが出る度に延々とpが追加されてしまうため良くないですね。アラートとか出すほうがいいかと思います。なんやかんやで、完成です。以下のサンプルで、選択項目を切り替えてみてください。JSONを取得して項目を切り替えるデモおまけ:.each()でループカウンターを使う先ほど説明した$.each()の第二引数の関数ではループカウンターを使うことができます。処理の回数分、0から数値が加算されていくんですね。実は通常の.each()でもこれが出来るのです。i){$(element).text(i);});$.each同様に、elementには、現在処理中の要素が入ります。$(this)と同じ意味合いですね。今回は$.get~.failで実装しましたが、「$.ajax()」を使うと以下のようになります。/&gt;').appendTo('div.adress').text('店舗データをロードできませんでした。/&gt;').appendTo('div.adress').text('店舗データをロードできませんでした。STUDIOdataTypeで「json」を設定し、受信が成功した場合を「success」失敗した場合を「error」に書きます。こちらの方がコードを見て解りやすいかもしれませんね。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。