jqueryで連想配列を作りたい

前提・実現したいこと

超初心者でして、実現したいことが可能なのかどうかもわかりません。
検索結果を表示するためにデータベースになげるクエリ文を作りたいと思っています。

チェックボックスで選択してもらい、その値を要素ごとに配列に入れたいと思っています。
その部分まではできたのですが、その連想配列を使って検索するための連想配列を作れずにいます。

2つの連想配列から以下のような連想配列を作りたいと思っています。

var A = {a1:11,a2:22,a3:33}
var B = {b1:11,b2:22,b3:33}

var result = [{a1:11,b1:11},{a1:11,b2:22},{a1:11,b3:33}...]
のようにすべての組み合わせの連想配列をresultに入れたいと思っています。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

var $_list = [];
$('#createList').on( 'click', function() {
   $.each( A, ( i, v ) => {
    $.each( B, ( ii, vv ) => {
$_list.push(v + ',' +vv); 
 } );
  } );
 } );

試したこと

色々試して見たのですが、思ったように値を取得できず悩んでいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2020/04/30 09:10

「jqueryで」とありますが、eachを使うことが必須なのでしょうか。現在のJavaScriptならjQueryより目的に適したメソッドがあると思います。また、JavaScriptに連想配列というものは無いので、「すべての組み合わせの配列」か「すべての組み合わせのオブジェクトの配列」にされてはいかがでしょう。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

jQueryによるUIとどのように絡むか、という観点はいったん置いておき、

javascript
1var A = { a1: 11, a2: 22, a3: 33 };
2var B = { b1: 91, b2: 92, b3: 93 };

という２つのオブジェクトA, Bから、以下のような配列

javascript
1[{ a1: 11, b1: 91}, { a2: 22, b2: 92}, { a3: 33, b3 :93}]

をresultとして得るコードを回答します。配列やオブジェクトの操作で便利なライブラリlodash の _.zip を使います。

javascript
1const result = _.zip(
2  ...[A, B].map(obj => Object.entries(obj))
3  ).map(entries => Object.fromEntries(entries));

動作確認用CodePen: https://codepen.io/jun68ykt/pen/wvKqRzp?editors=0012

以上参考になれば幸いです。

追記

上記のコードに少し追加します。上記のコードでは、

javascript
1var A = { a1: 11, a2: 22, a3: 33 };

に対して、Object.entries(A) とすると、 a1, a2, a3 の順の

javascript
1[ ["a1", 11], ["a2", 22], ["a3", 33] ]

という配列が得られることを前提にしていますが、これは結果オーライな雑なコードだったので、ソートを加えます。

javascript
1const result = _.zip(
2  ...[A, B].map(obj =>
3    Object.entries(obj).sort(([k1],[k2]) => k1.localeCompare(k2))
4  )
5).map(entries => Object.fromEntries(entries));

動作確認用CodePen: https://codepen.io/jun68ykt/pen/WNQELqm?editors=0012

追記2

別案です。lodashの _.pick を使います。上記のコードよりも、こちらのほうが、何をやっているか分かりやすいかもしれません。

javascript
1var C = { ...A, ...B };
2
3const len = Object.keys(A).length;
4
5const result = [...Array(len)].map((x, i) => _.pick(C, [`a${i+1}`, `b${i+1}`]));