jqueryで連想配列を作りたい

Question

前提・実現したいこと

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

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

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/ツールのバージョンなど）

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

Comments

[kei344]

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

Answer 1

こんにちは

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

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

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

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

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

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

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

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

追記

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

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

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

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

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

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

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

追記2

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

var C = { ...A, ...B };

const len = Object.keys(A).length;

const result = [...Array(len)].map((x, i) => _.pick(C, [`a${i+1}`, `b${i+1}`]));

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

Comments

[uwanosora]

考えも付かない答えをありがとうございました。実現したいことができました！

[jun68ykt]

どういたしまして????
> 実現したいことができました！
とのことで、よかったです????