個人的に配列を使う機会が少ない？と思うことからjQueryで2次元配列やJSONをtableに表示してみました。
スクリプトとサンプル
まずは、ソースに配列を書いた場合。
$(function() {
var ary =[
["オクラ","アフリカ北東部","夏"],
["キュウリ","インド西部","夏"],
["ゴーヤ","東南アジア", "夏"],
["トマト","南米アンデス高原地帯", "夏"],
["ナス","インド東部", "夏"],
["ピーマン","中南米", "夏"],
["トウモロコシ","南米北部","夏"],
["カボチャ","中南米","秋"],
["スイカ","アフリカ","夏"],
["ショウガ","熱帯アジア原産","秋"]
]
var wak = "";
for (i = 0; i < ary.length; i++) {
wak += "<tr>\n";
for (j = 0; j < ary[i].length; j++) {
wak += "<td>";
wak += ary[i][j];
wak += "<td>\n";
}
wak += "</tr>\n";
}
$("#listbox").append(wak);
});
スクリプトの処理内容
/* tableに表示する2次元配列です。*/
var ary =[
["オクラ","アフリカ北東部","夏"],
["キュウリ","インド西部","夏"],
["ゴーヤ","東南アジア", "夏"],
["トマト","南米アンデス高原地帯", "夏"],
["ナス","インド東部", "夏"],
["ピーマン","中南米", "夏"],
["トウモロコシ","南米北部","夏"],
["カボチャ","中南米","秋"],
["スイカ","アフリカ","夏"],
["ショウガ","熱帯アジア原産","秋"]
]
//変数 wak の初期値
var wak = "";
/*
for文で繰り返し処理を行います。
ary.length で 配列aryの要素数を取得
要素数は 10 になります。
*/
for (i = 0; i < ary.length; i++) {
/*
繰返し分、タグをつけ加える
\n は改行指定。無くてもOKですが、
生成されるtableのソースが改行無しで出力されて見辛いので入れています。
*/
wak += "<tr>\n";
/*
更にfor文で繰り返し処理を行います。
ary[i].length で配列aryの要素に格納している配列の要素数を取得
要素数は 3 になります。
*/
for (j = 0; j < ary[i].length; j++) {
/* 繰返し分、タグをつけ加える */
wak += "<td>";
/*
ary[i][j]で該当の値を取出します。
ary[0][0] で、取出すのは「オクラ」です。
ary[1][0] で、取出すのは「キュウリ」です。
*/
wak += ary[i][j];
/* 繰返し分、タグをつけ加える。\n は改行指定。 */
wak += "</td>\n";
}
/* 繰返し分、タグをつけ加える。\n は改行指定。 */
wak += "</tr>\n";
}
/*
つけ加えたHTMLタグ・文字列を
append()で ID #listbox に挿入します。
*/
$("#listbox").append(wak);
次に、jSONを利用した場合のサンプル。。
JSONを使った場合の処理
配列をJSONで外部ファイルにするとソースが更にスッキリします。
ｊQueryの記述
$(function() {
$.getJSON("yasai.json", function(yasai){
var wak = "";
for (i = 0; i < yasai.length; i++) {
wak += "<tr>\n";
for (j = 0; j < yasai[i].length; j++) {
wak += "<td>";
wak += yasai[i][j];
wak += "</td>\n";
}
wak += "</tr>\n";
}
$("#listbox").append(wak);
});
});
yasai.jsonの記述
[
["オクラ","アフリカ北東部","夏"],
["キュウリ","インド西部","夏"],
["ゴーヤ","東南アジア", "夏"],
["トマト","南米アンデス高原地帯", "夏"],
["ナス","インド東部", "夏"],
["ピーマン","中南米", "夏"],
["トウモロコシ","南米北部","夏"],
["カボチャ","中南米","秋"],
["スイカ","アフリカ","夏"],
["ショウガ","熱帯アジア原産","秋"]
]
変更箇所
殆どサンプル1と変りが無いので違いの部分だけ
/*
getJSON を使って yasai.jsonのデータを取得しています
*/
$.getJSON("yasai.json", function(yasai){
～～処理内容～～
});