Javascript、jqueryでJSONファイルをtableへ出力

前提・実現したいこと

webapiを実行し、JSONファイルを取得した内容をtableへ出力させたいです。
出力方法についてご教授いただけないでしょうか。

読み込み対象のJSONファイルサンプル
[
{
"a": "あ",
"b": "い",
"c": "う",
"bodies": [
{
"d": "え",
"e": "お"
},
{
"d": "ええ",
"e": "おお"
}
]
},
{
"a": "ああ",
"b": "いい",
"c": "うう",
"bodies": [
{
"d": "えええ",
"e": "おおお"
},
{
"d": "ええええ",
"e": "おおおお"
}
]
}
]

上記を読み込み、tableの列名と一致するキーの値のみをテーブル列の順番通りに抽出し、javascriptもしくはjqueryを使用して以下のtr、th、tdを作成したいです。

行列データのイメージは以下です。
d,c,e
え,う,お
ええ,う,おお
えええ,うう,おおお
ええええ,うう,おおおお

JS
1const header = {
2    "d": "メモ",
3    "c": "担当者",
4    "e": "名称"
5};

テーブル

html
1<table>
2    <thead>
3        <tr>
4            <th>メモ</th>
5            <th>担当者</th>
6            <th>名称</th>
7        </tr>
8    </thead>
9    <tbody>
10        <tr>
11            <td></td>
12            <td></td>
13            <td></td>
14        </tr>
15    </tbody>
16</table>

Lhankor_Mhy

2018/11/06 13:27

出力の仕様を具体的に書いてください。「えええ,う,おおお」の行が「えええ,うう,おおお」ではない理由が読み取れませんでした。

seiyan0426

2018/11/06 13:40

失礼いたしました、ご確認いただきありがとうございます。ご指摘の通り、3,4行目は、ヘッダ部の値が出力されるため、「うう」でした。申し訳ありません。

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

回答1件

ベストアンサー

js
1const json = [
2  {
3    "a": "あ",
4    "b": "い",
5    "c": "う",
6    "bodies": [
7      {
8        "d": "え",
9        "e": "お"
10      },
11      {
12        "d": "ええ",
13        "e": "おお"
14      }
15    ]
16  },
17  {
18    "a": "ああ",
19    "b": "いい",
20    "c": "うう",
21    "bodies": [
22      {
23        "d": "えええ",
24        "e": "おおお"
25      },
26      {
27        "d": "ええええ",
28        "e": "おおおお"
29      }
30    ]
31  }
32] ;
33const header = {
34  "d": "メモ",
35  "c": "担当者",
36  "e": "名称"
37};
38
39const flattenJSON = json.map(e=>
40  e.bodies.map(row=>{
41    Object.assign(row,e);
42    return row;
43  })
44).flat();
45
46const tbody = flattenJSON.map(row=>`
47      <tr>
48          <td>${row.d}</td>
49          <td>${row.c}</td>
50          <td>${row.e}</td>
51      </tr>
52`).join('');
53
54$('tbody').html(tbody);
55
56/*
57
58        <tr>
59            <td>え</td>
60            <td>う</td>
61            <td>お</td>
62        </tr>
63  
64        <tr>
65            <td>ええ</td>
66            <td>う</td>
67            <td>おお</td>
68        </tr>
69  
70        <tr>
71            <td>えええ</td>
72            <td>うう</td>
73            <td>おおお</td>
74        </tr>
75  
76        <tr>
77            <td>ええええ</td>
78            <td>うう</td>
79            <td>おおおお</td>
80        </tr>
81  
82*/

コメントを受けて修正

サンプル
(サンプルではわざとtheadの順番を変えてあります)

js
1const json = [
2  {
3    "a": "あ",
4    "b": "い",
5    "c": "う",
6    "bodies": [
7      {
8        "d": "え",
9        "e": "お"
10      },
11      {
12        "d": "ええ",
13        "e": "おお"
14      }
15    ]
16  },
17  {
18    "a": "ああ",
19    "b": "いい",
20    "c": "うう",
21    "bodies": [
22      {
23        "d": "えええ",
24        "e": "おおお"
25      },
26      {
27        "d": "ええええ",
28        "e": "おおおお"
29      }
30    ]
31  }
32] ;
33const header = {
34  "d": "メモ",
35  "c": "担当者",
36  "e": "名称"
37};
38
39const reverseHeader = new Map( Object.entries( header ).map( 
40  e => [...e].reverse()
41) );
42const theadArray = Array.from( $('thead th') ).map(
43  e => e.textContent
44);
45const flattenJSON = json.map( e =>
46  e.bodies.map( row => {
47    Object.assign( row, e );
48    return row;
49  } )
50).flat();
51
52const tbody = flattenJSON.map( row=>`
53      <tr>
54${ theadArray.map( head => `
55          <td>${ row[ reverseHeader.get( head ) ] }</td>
56`).join('') }
57      </tr>
58`).join('');
59
60$('tbody').html( tbody );