React: 入れ子になった配列をTable形式で表示したい

Question

以下の様なJSON形式のデータを取得した後，

  const data = [
     {'Subject': ['100', '101', '102']},
     {'Height': [189, 200, 174]},
     {'Country': ["Japan", "US", "India"]}
   ]

React frontendで，

Subject	Height	Country
100	189	Japan
101	200	US
102	174	India

の様に表示したいと考えております。
ただ，取得したデータの列の要素は可変であり，状況によってはSubject, Weight, Blood typeを取得するため，コードの中でkeyは固定せずに対応できればと思います。

別のスレッドで以下のコードをご提供頂き，そちらを改変したいと考えているのですが，React初心者のためどうすれば良いか分からず，現状はひとつのセルに結合されてしまっている状況です。。

  const keys = nameList.reduce(
    (keys, obj) => [...keys, ...Object.keys(obj).filter(key => !keys.includes(key))],
    []);

      <table>
        <thead>
          <tr>
            {keys.map(key => <th key={key}>{key}</th>)}
          </tr>
        </thead>
        <tbody>
          {nameList.map((obj, index) => 
            (<tr key={index}>
              {keys.map(key => 
                <td key={key}>{obj[key]}</td>)
              }
            </tr>))}
        </tbody>
      </table>

ご教示頂けますと幸いです。

//////追記////////

【背景】：
上記，お示したデータ構造は，backendよりPythonのリストファイルを，JSON形式にしてfrontendで受け取ったそのままの形となっております。元のデータは「変数名（subject, height, country, ...）」と「その中身」というペアのデータです。

【やりたい事】：
色々調べてみると，上記の構造では扱いにくい様なので，配列に格納する際に一度keyとvalueのペアでデータを加工したいと思います。

  const data = [
     {key: 'Subject', value: ['100', '101', '102']},
     {key: 'Height', value: [189, 200, 174]},
     {key: 'Country': value: ["Japan", "US", "India"]}
   ]

最終的には上記を表形式で表示できればと考えております。
その後，React上で，keyをtableのheaderに, valueをbodyに持っていきたいと思っております。

【分からない事】：
①データを扱いやすい形に変更しようと，以下のコードを試したのですが，

const data = [
  {'Subject': ['100', '101', '102']},
  {'Height': [189, 200, 174]},
  {'Country': ["Japan", "US", "India"]}
]

const data0 = {}
const data1 = []
for (const item of data){
	for (var [key,value] of Object.entries(item)) {
      data0['key']=key
      data0['value']=value
  	  data1.push(data0)
    }
}

console.log(data1)

data1の中が，最後のCountryが3つ表示され，SubjectやHeightが格納されませんでした。

②こちらはまだ実施していないのですが，今までの流れだと['Japan', 'US', 'India']がTable bodyで結合されJapanUSIndiaとなりそうな気がしております。<Table>を利用する事は妥当でしょうか？

Comments

[hoshi-takanori]

このままだと単なる丸投げなので、まず前回のコードが何をしてるか理解する努力をして欲しい (reduce 使ってるのでちょっと難しいけど) し、今回のは前回とはデータ構造が違うので、アプローチをちょっと変える必要がありますね。

[caveatld]

ご連絡ありがとうございます，ご指摘の通りです。大変申し訳ございません。
かなり焦ってしまいました…もう少し調査したいと思います。

[hoshi-takanori]

今回のデータ構造は、data という配列の要素が、キーがひとつしかないオブジェクトになってます。
で、前回のコメントに「仕様がいまいち曖昧」と書いたのは以下のような疑問があるからです。
・data の各要素にキーが複数あることもあるのでは？
・data の各要素の中身が配列でないことを考慮する必要はあるか？
・data の複数の要素が同じキーを持つことは？ あるとしたら、どう表示する？

単に答えを知りたい (動くコードが欲しい) のではなく、ご自分でコードを書けるようになりたいならサポートしますけど…。

[caveatld]

お忙しいところ，コメントありがとうございます！
はい，やはり自分で書き上げたコードの方が頭に残るので，ポイント等ご教示いただけると大変ありがたいです。
色々ネットで検索してみたのですが，そもそも"data"に格納された形が扱い辛い事がわかりました。少し情報を追記しております。
・data の各要素にキーが複数あることもあるのでは？ --> keyは1配列1つです。
・data の各要素の中身が配列でないことを考慮する必要はあるか？ --> 常にkey, value（配列）のセットです
・data の複数の要素が同じキーを持つことは？ あるとしたら、どう表示する？ --> 同じkeyは存在しません。

[hoshi-takanori]

なるほど。その条件なら単純ですね。

まず、データを整理すると、
const data = [
{key1:[/* 配列1 */]},
{key2:[/* 配列2 */]},
{key3:[/* 配列3 */]},
];
という形ってことですよね。これは、各キーに対応するデータが横に並んでます。

これを table にするには、
<table>
<thead>
<tr><th>key1</th><th>key2</th><th>key3</th></tr>
</thead>
<tbody>
<tr><td>配列1[0]</td><td>配列2[0]</td><td>配列3[0]</td></tr>
<tr><td>配列1[1]</td><td>配列2[1]</td><td>配列3[1]</td></tr>
<tr><td>配列1[2]</td><td>配列2[2]</td><td>配列3[2]</td></tr>
</tbody>
</table>
とする必要があります。各キーに対応する値が、縦に並んでるのにお気づきでしょうか。

あとはこれをループや map を使ってどう書くかってことになります。
とりあえず最初の key1, key2, ... の部分から考えてみてはいかがでしょうか。

[caveatld]

非常に素人のcodingで改善の余地が多いのですが，なんとかできました！本当にありがとうございました！！teratail初心者なのですが，頂いた情報をもとに対応できたので，ベストアンサーにさせて頂きたいのですが，どの様にすればよろしいでしょうか？

```js
const keys1 = []
const values = []
for (const item of data){
for (const var1 of Object.keys(item)){
keys1.push(var1)
}
};
for (const item of data){
for (const var1 of Object.values(item)){
values.push(var1)
}
};
const transpose = (matrix) => {
let [row] = matrix
return row.map((value, column) => matrix.map(row => row[column]))
}
const fvalues = transpose(values);
------
<table>
{<thead>
<tr>
{keys1.map(key => <th key={key}>{key}</th>)}
</tr>
</thead>}
<tbody>
{fvalues.map((obj, index) =>
(<tr key={index}>
{values.map((key, sindex) =>
<td key={sindex}>{obj[sindex]}</td>)
}
</tr>))}
</tbody>
</table>

```

[hoshi-takanori]

transpose とかすごいことをやってますね。ご自分でそれを回答欄に書いて自己解決にしちゃってください。