やりたいこと
プログラミングを使って、多次元の連想配列を作成する。
data = [{"name": "item0", "value": 0},
{"name": "item1", "value": 1},
{"name": "item2", "value": 2},
{"name": "item3", "value": 3},
{"name": "item4", "value": 4}];
こめつぶ
連想配列を動的に作りたかったので、調査してみました！
目的
多次元の連想配列は決め打ちで書けば、簡単にデータを作成することができます。
ただ、連想配列を決め打ちで作成するのではなく、プログラミングで動的にデータを追加できるようにするのが、今回の目的です。
備忘録としてサンプルコードを載せておこうと思います。
サンプルコード
簡単なサンプルコードを書いてみました。
!function () {
var data = [];
for (var i = 0; i < 5; i++) {
var data_tmp = {};
data_tmp.name = "item" + i;
data_tmp.value = i;
data.push(data_tmp);
}
alert(JSON.stringify(data));
}();実行画面
こめつぶ
期待する結果が出力されました！
コードの解説
関数宣言を行う。
!function () {
//必要な処理を記載する。
}();空の配列を作成する。
var data = []; //空の配列を作成する。繰り返し行いたい処理をfor文の中に記載する。
for (var i = 0; i < 5; i++) {
//繰り返し行う処理を記載する。
}連想配列のデータを作成して、配列にデータを追加する。
var data_tmp = {}; //空の連想配列を作成する。
data_tmp.name = "item" + i; //nameがキーとなる連想配列を作成する。
data_tmp.value = i; //valueがキーとなる連想配列を作成する。
data.push(data_tmp); //連想配列を配列に追加する。デバッグコード
alert(JSON.stringify(data)); //オブジェクトを表示させる時に使います。おまけ
配列化された連想配列のデータを取得したい場合はどのようにすれば良いか。
例1)1番目のvalueの値を取得したい場合
alert(data[0].value);実行結果
こめつぶ
期待する結果が出力されました！
例2)4番目のnameの値を取得したい場合
alert(data[3].name);実行結果
こめつぶ
どちらもdataの後ろに添字を付けることで取得できます！
nameやvalueの後ろに付けても出力されませんでしたので、注意が必要です！
nameやvalueの後ろに付けても出力されませんでしたので、注意が必要です！
終わりに
記事を書いていて、思ったのは多次元の連想配列というよりは、連想配列の配列化と行った方が正しいような気がしてました。
サンプルコードは小さく作りましたので、使ってみれば、同様の結果が得られると思います。
データの構造を理解すれば、簡単なのかもしれませんがやはり難しいですね。
また自分がハマったところがあれば、簡単なサンプルコードを載せていきたいと思います。
【JavaScript】多次元配列を作成するサンプルコードの記事はこちら
