人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

配列操作について教えて下さい。
dataArray4 =
["2015/11/25 16:40:58","2015/11/25","鈴木","UNIT1","80"],
["2015/11/25 16:40:59","2015/11/25","鈴木","UNIT1","40"],
["2015/11/25 16:40:60","2015/11/25","鈴木","UNIT2","50"],
["2015/11/25 16:40:61","2015/11/25","鈴木","UNIT2","60"],
["2015/11/25 16:40:61","2015/11/25","鈴木","UNIT2","90"],

このような配列データをうまく並べ替え、配列の3番めにある「UNIT」ごとに行を作成、
4番目の点数を列のデータにして、テーブルを作成したいと考えております。
(添付JPG参照)

JSfiddleにサンプルを入れました。
https://jsfiddle.net/kajironpu/67njxhjv/
既存の配列で、1つ目と2つ目の3番目の「タイトル」がもし同じだったら、別の配列にpushしています。
このようなやり方で、全部別の配列に入れなおして、それをテーブル表示する方法を考えました。
並べ替え後は
["UNIT1","80","40"],["UNIT2,"50","60","90"]
のような形にしてテーブル表示させたい。

このようなやり方は正しいでしょうか? もっとスマートなやり方があれば是非教えて下さい。



1448507045
●拡大する

●質問者: kajironpu
●カテゴリ:コンピュータ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

質問の jsfiddle にあるコードだと、以下のような問題があります。

スマートなやり方かどうかは分かりませんが、UNIT* 毎にデータを集計したいのであれば、連想配列を使うのが良いと思います。

dataArray4 =[
 ["2015/11/25 16:40:58","2015/11/25","鈴木","UNIT1","80"],
 ["2015/11/25 16:40:59","2015/11/25","鈴木","UNIT1","40"],
 ["2015/11/25 16:40:60","2015/11/25","鈴木","UNIT2","50"],
 ["2015/11/25 16:40:61","2015/11/25","鈴木","UNIT2","60"],
 ["2015/11/25 16:40:61","2015/11/25","鈴木","UNIT2","90"],
];

// データの集計
var tableMap = {}; // 連想配列(添え字が文字列)
for (var i=0; i<dataArray4.length; i++){
 var key = dataArray4[i][3];
 var rec = tableMap[key];
 if (! rec) { // 最初は何も入ってない
 rec = [];
 }
 rec.push(dataArray4[i][4]);
 tableMap[key] = rec;
}

こうやって集計すると、例えば tableMap[ "UNIT2" ][ 1 ]60 になります。

一覧表を作るところも含めて jsfiddle にコードを置いてみました。
https://jsfiddle.net/a_kuma3/p50gb5o7/1/


kajironpuさんのコメント
さっそくありがとうございます。連想配列ははじめてで、じっくり理解しています。 if (! rec) { // 最初は何も入ってない rec = []; } 上の部分が理解できないのですが、ここはどういう意味の処理なのでしょうか?

a-kuma3さんのコメント
>> if (! rec) { // 最初は何も入ってない &nbsp;&nbsp;&nbsp;&nbsp;rec = []; } 上の部分が理解できないのですが、ここはどういう意味の処理なのでしょうか? << ループをひとつずつたどってみます。 >|| // i = 0 // 処理対象は ["2015/11/25 16:40:58","2015/11/25","鈴木","UNIT1","80"], var key = dataArray4[i][3]; // key = "UNIT1" var rec = tableMap[key]; // rec = tableMap[ "UNIT1" ] (= null) if (! rec) { // rec = null なので、! rec は「真」 rec = []; // rec を空の配列にする(後の .push がエラーになっちゃうから) } rec.push(dataArray4[i][4]); // rec = [80] になる tableMap[key] = rec; // tableMap[ "UNIT1" ] = [80] // i = 1 // 処理対象は ["2015/11/25 16:40:59","2015/11/25","鈴木","UNIT1","40"], var key = dataArray4[i][3]; // key = "UNIT1" var rec = tableMap[key]; // rec = tableMap[ "UNIT1" ] (= [80]) if (! rec) { // rec は [80] なので、! rec は「偽」 rec = []; // ここにはこない } rec.push(dataArray4[i][4]); // rec = [80, 40] になる tableMap[key] = rec; // tableMap[ "UNIT1" ] = [80, 40] // i = 2 // 処理対象は ["2015/11/25 16:40:60","2015/11/25","鈴木","UNIT2","50"], var key = dataArray4[i][3]; // key = "UNIT2" var rec = tableMap[key]; // rec = tableMap[ "UNIT2" ] (= null) if (! rec) { // rec = null なので、! rec は「真」 rec = []; // rec を空の配列にする(後の .push がエラーになっちゃうから) } rec.push(dataArray4[i][4]); // rec = [50] になる tableMap[key] = rec; // tableMap[ "UNIT2" ] = [50] ||< ちなみに、 >|| if (! rec) { ... ||< は、以下と同じ意味です。 >|| if (rec == null) { ... ||<

kajironpuさんのコメント
ありがとうございます! 1つ1つ順を追って理解しています。 // rec = tableMap[ "UNIT2" ] (= null) このnull(空っぽ?)の意味は、UNIT2がはじめて登場してきたという意味なのでしょうか? つまり、配列にプッシュするには、最初は空の配列を用意しておく必要があるので あたらしいkeyが出て来たときの判定用ですか?

a-kuma3さんのコメント
>> // rec = tableMap[ "UNIT2" ] (= null) このnull(空っぽ?)の意味は、UNIT2がはじめて登場してきたという意味なのでしょうか? << そうです。 i = 2 の時点では、tableMap にはキーが "UNIT1" のデータしか入っていないので、"UNIT2" で取り出すと null が取り出されます。 >> つまり、配列にプッシュするには、最初は空の配列を用意しておく必要があるので あたらしいkeyが出て来たときの判定用ですか? << そうです。 最初に空の配列を全てセットしておく、という手もあります。 >|javascript| var tableMap = {}; // 連想配列(添え字が文字列) // 最初に空の配列を設定しておく for (var i=0; i<dataArray4.length; i++){ var key = dataArray4[i][3]; tableMap[key] = []; } // データを集計する for (var i=0; i<dataArray4.length; i++){ var key = dataArray4[i][3]; var rec = tableMap[key]; rec.push(dataArray4[i][4]); // rec は Array だと保証されている tableMap[key] = rec; } ||< 分かりやすいように、やや冗長に書いています。 もっと短く書くと、こんな風に書けます。 >|javascript| var tableMap = {}; // 連想配列(添え字が文字列) // 最初に空の配列を設定しておく dataArray4.forEach(function(rec) { tableMap[rec[3]] = []; }); // データを集計する dataArray4.forEach(function(rec) { tableMap[rec[3]].push(rec[4]); }); ||<

kajironpuさんのコメント
なるほど、とても勉強になります。 ありがとうございます。 2番目の空の配列を用意しておくやり方が分かりやすいです。 どうもありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ