Jquery JavaScriptで2つの配列から組み合わせを作成する方法

Question

Jqueryを使った処理で方法が思いつかず行き詰まっています。
皆様のお力をお借りしたく投稿いたしました。
どうぞよろしくお願いします。

■やりたいこと
2つの配列から組み合わせを作成した後<li>要素を追加したい。
下記のコード内の【createList()】の処理が思いつかない。

var array1 = ['A','B'];
var array2 = ['1','2'];

function createList(){
//この部分の処理が思いつきません。
//配列【array1】と【array2】の組み合わせを生成してul#listに<li>要素をappendしたい。
}

【createList()実行前】

<button onclick="createList();">createList</button>

<ul id="list">
</ul>

【createList()実行後】

<button onclick="createList();">createList</button>

<ul id="list">
    <li data-array1="A" data-array2="1">A × 1</li>
    <li data-array1="A" data-array2="2">A × 2</li>
    <li data-array1="B" data-array2="1">B × 1</li>
    <li data-array1="B" data-array2="2">B × 2</li>
</ul>

Comments

[namimon]

<li>内の data-arrayは全て1ですか？

[tato.aoki]

質問時のコードの記載が間違っていました。

Answer 1

<button id="createList">createList</button>

<ul id="list">
</ul>

$( _=> {
	const array1 = [ 'A', 'B' ];
	const array2 = [ '1', '2' ];
	const $_list = $( '#list' );
	$( '#createList' ).on( 'click', function() {
		$.each( array1, ( i, v ) => {
			$.each( array2, ( ii, vv ) => {
				$_list.append( '<li data-array1="' +v + '" data-array2="' +vv + '">' +v + ' × ' +vv + '</li>');
			} );
		} );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/5j3jnxfe/](https://jsfiddle.net/5j3jnxfe/)

---

【jQuery.each() | jQuery API Documentation】
[http://api.jquery.com/jquery.each/](http://api.jquery.com/jquery.each/)

【.each() | jQuery 1.9 日本語リファレンス | js STUDIO】
[http://js.studio-kingdom.com/jquery/traversing/each](http://js.studio-kingdom.com/jquery/traversing/each)

Comments

[tato.aoki]

ご回答ありがとうございます！
思い通りの処理を実装することができました。

動くサンプルまでご提示いただき本当に助かりました。

Answer 2

こんなかんじですか。

function createList(){
  array1.map(
    e1 => array2.map(
      e2 => $('#list').append(`<li data-array1="${e1}" data-array2="${e2}">${e1} × ${e2}</li>`)
    )
  )
}

Comments

[tato.aoki]

素早いご回答本当にありがとうございました！
JQueryのmapの使い方をこれを機にしっかりと調べなおすことにします！

Answer 3

2つの配列から組み合わせを作成するのと、組み合わせを元にli要素を生成するのは処理を分割できるので。

<button id="createList">createList</button>

<ul id="list">
</ul>

// 2つの配列から組み合わせを作成
function makeComb(arr1, arr2) {
  var result = [];
  arr1.forEach(function(v1) {
    arr2.forEach(function(v2) {
      result.push([v1, v2]);
    });
  });
  return result;
};

function createList() {
  var array1 = ['A', 'B'],
      array2 = ['1', '2'],
      comb = makeComb(array1, array2), // [["A","1"],["A","2"],["B","1"],["B","2"]]
      $ul = $('#list');

  // li要素の作成
 var $list = comb.map(function(arr){
    var v1 = arr[0],
        v2 = arr[1],
        $li = $('<li />').attr({
          'data-array1': v1,
          'data-array2': v2,
        }),
        text = [v1, v2].join(' × ');
    
    return $li.text(text);
  });

  $ul.append($list);
};

$('#createList').on('click', function() {
  createList();
});