各配列を見て要素を生成したい

前提・実現したいこと

javascript初心者です

与えられた配列から、表を生成したいです。
これを読んでもよくわかりませんでした。
あんまり関係ない気もしますが、、、

該当のソースコード

html
1    <select>
2     <option value='piyo'>piyo</option>
3     <option value='fuga'>fuga</option>
4    </select>
5
6    <table border='1'>
7      <thead>
8        <tr>
9          <th>a</th>
10          <th>b</th>
11        </tr>
12      </thead>
13    </table>
14
15    <script type="text/javascript">
16      var hoge = {
17        fuga: [
18          [1, 2, 2, 1],
19          [1, 4, 3, 5],
20          [2, 4, 3, 1]
21        ],
22        piyo: ...
23      };
24
25      document.querySelector('select').onchange = function(){
26        hoge.fuga.forEach(one =>) # ここの書き方が分からない
27      }
28    </script>

やりたいこと

selectボックスでfugaが選ばれたら、DOMを以下のように変えたい

html
1    <table border='1'>
2      <thead>
3        <tr>
4          <th>a</th>
5          <th>b</th>
6        </tr>
7      </thead>
8      <tbody>
9        <tr>
10          <td>1-2</td>
11          <td>2-1</td>
12        </tr>
13        <tr>
14          <td>1-4</td>
15          <td>3-5</td>
16        </tr>
17        <tr>
18          <td>2-4</td>
19          <td>3-1</td>
20        </tr>
21      </tbody>
22    </table>

質問したいことは2つ

eachでもfilterでもなんでもいいのですが、各配列に関する処理を関数化するにはどう書くのがいいでしょうか。
hoge.fuga.forEachと書いていますが、このfugaのところを動的に変えられないでしょうか(selectボックスでpiyoが選ばれていたらpiyoの2重配列を参照したいです)

miyabi_pudding

2021/03/27 09:22

まずは、質問者さんが思うように書いてみましょう。今のままだと、丸投げになってしまいます。コード書いて実行して、壊れるような事は余程のことない限りないので、まずは自分で書いてみましょう。

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

回答2件

ベストアンサー

なんでもいいのなら reduce もありということで

html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<style>
4</style>
5
6<body> 
7   <select>
8     <option value='piyo'>piyo</option>
9     <option value='fuga'>fuga</option>
10    </select>
11
12
13    <table border='1'>
14      <thead>
15        <tr>
16          <th>a</th>
17          <th>b</th>
18        </tr>
19      </thead>
20      <tbody id="babu">
21    </table>
22
23<script>
24const hoge = {
25  fuga: [
26    [1, 2, 2, 1],
27    [1, 4, 3, 5],
28    [2, 4, 3, 1]
29  ],
30  piyo: [
31    [8, 9, 9, 8],
32    [9, 5, 7, 2],
33    [2, 2, 2, 2]
34  ],
35};
36
37const
38  remove = a=>[...a].forEach(a=>a.remove()),
39  split = (a,b=1,c=[],d=[...a])=>{for(;d.length;c.push(d.splice(0,b)));return c},
40  ary2Tbody = (a,b=document.createElement('tbody'))=>
41    a.reduce((a,b)=>(b.reduce((c,d)=>(c.insertCell().textContent=d,c),a.insertRow()),a),b);
42
43
44function repaceTbody (name) {
45  remove (babu.childNodes);
46  ary2Tbody (hoge[name].map (a=>split(a,2).map(a=>a.join('-'))),babu);
47}
48
49
50function handler ({target}) {
51  repaceTbody (target.value);
52}
53
54document.querySelector('select').addEventListener ('change', handler, false);
55</script>
56