teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJSONに関する質問JSONで取得した値を比較表形式で出力したい。

編集履歴

回答編集履歴

4

joinの中身を改行文字にすることで多少読みやすく調整(流石に字下げまでは考慮しない)

2019/01/22 06:50

投稿

miyabi-sun
miyabi-sun

スコア21461

answer CHANGED
@@ -39,13 +39,13 @@
39
39
  <thead>
40
40
  <tr>
41
41
  <th></th>
42
- ${t.map((_, i) => `<th>${i + 1}個目</th>`).join('')}
42
+ ${t.map((_, i) => `<th>${i + 1}個目</th>`).join('\n')}
43
43
  </tr>
44
44
  </thead>
45
45
  <tbody>
46
46
  ${keys.map(key => `<tr><td>${key}</td>${
47
47
  t.map(it => `<td>${it[key]}</td>`).join('')
48
- }</tr>`).join('')}
48
+ }</tr>`).join('\n')}
49
49
  </tbody>
50
50
  </table>`;
51
51
 
@@ -54,11 +54,16 @@
54
54
  // <thead>
55
55
  // <tr>
56
56
  // <th></th>
57
- // <th>1個目</th><th>2個目</th><th>3個目</th>
57
+ // <th>1個目</th>
58
+ // <th>2個目</th>
59
+ // <th>3個目</th>
58
60
  // </tr>
59
61
  // </thead>
60
62
  // <tbody>
61
- // <tr><td>midashi1</td><td>val11</td><td>val21</td><td>val31</td></tr><tr><td>midashi2</td><td>val12</td><td>val32</td><td>val32</td></tr><tr><td>midashi3</td><td>val13</td><td>val23</td><td>val33</td></tr><tr><td>midashi4</td><td>val14</td><td>val24</td><td>val24</td></tr>
63
+ // <tr><td>midashi1</td><td>val11</td><td>val21</td><td>val31</td></tr>
64
+ // <tr><td>midashi2</td><td>val12</td><td>val32</td><td>val32</td></tr>
65
+ // <tr><td>midashi3</td><td>val13</td><td>val23</td><td>val33</td></tr>
66
+ // <tr><td>midashi4</td><td>val14</td><td>val24</td><td>val24</td></tr>
62
67
  // </tbody>
63
68
  // </table>"
64
69
  ```

3

keysの使い方の注釈を追加

2019/01/22 06:50

投稿

miyabi-sun
miyabi-sun

スコア21461

answer CHANGED
@@ -2,6 +2,8 @@
2
2
  適宜`<tr>`で挟まなければならないので、もう少し複雑になりますが、この方向で考えてください。
3
3
 
4
4
  ```JavaScript
5
+ // Object.keys(t)にすると、[0, 1, 2]という誰得配列になるので、0番目の要素をサンプルとしてキー情報を抜き出す
6
+ var keys = Object.keys(t[0]);
5
7
  for (var i = 0; i < keys.length; i++) {
6
8
  var key = keys[i];
7
9
  for (var j = 0; j < t.length; j++) {

2

ES2015の表記を追加

2019/01/22 06:47

投稿

miyabi-sun
miyabi-sun

スコア21461

answer CHANGED
@@ -16,11 +16,15 @@
16
16
  ただまぁ、下記のような機能を覚えればスマートに書けるので余裕が出てきたら
17
17
  配列を操作するメソッドの扱いも勉強してみてください。
18
18
 
19
- - [テンプレート文字列](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings)
19
+ - [テンプレート文字列](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings): ※ES2015なのでIE11非対応
20
- - [アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
20
+ - [アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions): ※ES2015なのでIE11非対応
21
21
  - [Array.prototype.map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
22
22
  - [Array.prototype.join](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
23
23
 
24
+ ES2015という新しいバージョンの書き方はIE11には非対応ですので、
25
+ もし気になるようなら[Babel](https://babeljs.io/)のような新しいバージョンのコードをES5相当の書き方にコンパイルするツールや、そこの部分だけES5相当の書き方で代用することを検討してみてください。
26
+ 下記のコードは可読性重視でフル活用しています。
27
+
24
28
  ```JavaScript
25
29
  var t = [
26
30
  {"midashi1":"val11","midashi2":"val12","midashi3":"val13","midashi4":"val14"},

1

1個のテンプレート文字列に閉じ込めることで可読性アップ

2019/01/22 06:39

投稿

miyabi-sun
miyabi-sun

スコア21461

answer CHANGED
@@ -29,21 +29,30 @@
29
29
  ];
30
30
  var keys = Object.keys(t[0]);
31
31
 
32
- var rs = '<table>';
32
+ var rs = `<table>
33
+ <thead>
34
+ <tr>
33
- // ヘッダー部
35
+ <th></th>
34
- rs += '<thead><tr><th></th>';
35
- rs += t.map((_, i) => `<th>${i + 1}個目</th>`).join('');
36
+ ${t.map((_, i) => `<th>${i + 1}個目</th>`).join('')}
37
+ </tr>
38
+ </thead>
39
+ <tbody>
36
- rs += '</tr></thead>';
40
+ ${keys.map(key => `<tr><td>${key}</td>${
41
+ t.map(it => `<td>${it[key]}</td>`).join('')
42
+ }</tr>`).join('')}
43
+ </tbody>
44
+ </table>`;
37
45
 
38
- // ボディー部
39
- rs += '<tbody>';
40
- rs += keys.map(key => `<tr><td>${key}</td>${
41
- t.map(it => `<td>${it[key]}</td>`).join('')
42
- }</tr>`).join('');
43
- rs += '</tbody>';
44
-
45
- rs += '</table>';
46
-
47
46
  console.log(rs);
48
- // "<table><thead><tr><th></th><th>1個目</th><th>2個目</th><th>3個目</th></tr></thead><tbody><tr><td>midashi1</td><td>val11</td><td>val21</td><td>val31</td></tr><tr><td>midashi2</td><td>val12</td><td>val32</td><td>val32</td></tr><tr><td>midashi3</td><td>val13</td><td>val23</td><td>val33</td></tr><tr><td>midashi4</td><td>val14</td><td>val24</td><td>val24</td></tr></tbody></table>"
47
+ // "<table>
48
+ // <thead>
49
+ // <tr>
50
+ // <th></th>
51
+ // <th>1個目</th><th>2個目</th><th>3個目</th>
52
+ // </tr>
53
+ // </thead>
54
+ // <tbody>
55
+ // <tr><td>midashi1</td><td>val11</td><td>val21</td><td>val31</td></tr><tr><td>midashi2</td><td>val12</td><td>val32</td><td>val32</td></tr><tr><td>midashi3</td><td>val13</td><td>val23</td><td>val33</td></tr><tr><td>midashi4</td><td>val14</td><td>val24</td><td>val24</td></tr>
56
+ // </tbody>
57
+ // </table>"
49
58
  ```