Javascriptの配列をHTMLで表にしたいです。

スクリプト内の配列をHTMLで表にしたいのですが、変換できません。どこが間違っていますでしょうか。スクリプト内が全く現れません。

<body> <h1>Mountains</h1> <div id="mountains"></div> <table id="targetTable"> <tr> <th>name</th> <th>height</th> <th>place</th> </tr> </table>

<script>
  const MOUNTAINS = [
    {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
    {name: "Everest", height: 8848, place: "Nepal"},
    {name: "Mount Fuji", height: 3776, place: "Japan"},
    {name: "Vaalserberg", height: 32, place: "Netherlands"},
    {name: "Denali", height: 6168, place: "United States"},
    {name: "Popocatepetl", height: 5465, place: "Mexico"},
    {name: "Mont Blanc", height: 4808, place: "Italy/France"}
  ];
  var table = documnet.getElementById('targetTable');
  var newTable;  
  for (let i = 0; i< MOUNTAINS.length; i++){
      newTable = document.createElement('targetTable');
      newTable.appendChild(document.createTextNode('newTable'));
      MOUNTAINS[i].appendChild(newTable);
    
  }

</script> </body>

m.ts10806

2021/01/30 21:09

コードはマークダウンのcode機能にてご提示ください

m.ts10806

2021/01/30 22:11 編集

あと、エラー確認してください。ブラウザのデベロッパツール→コンソール＞どこが間違っていますでしょうかエラーが教えてくれます。 https://qiita.com/cannorin/items/eb062aae88bfe2ad6fe5

退会済みユーザー

2021/01/31 01:23 編集

コード見てるとそもそもHTMLを理解されていない様にお見受けいたします。べたなHTMLで、完成画面って作れますか？ HTMLのテーブルへの追記に必要と思われる、trタグ、tdタグ等がスクリプト中に全く出てきていないです。

Chibichan

2021/01/31 07:06

簡単な画面は作れます。スクリプト中に入れないとだめなんですね。

退会済みユーザー

2021/01/31 07:34

そうなんですが、何か理解度が怪しいですね…。とりあえず、createElement()とcreateTextNode()の使い方が見当違いだったから画面に出ていなかったという事実は受け止めておいてください。 https://developer.mozilla.org/ja/docs/Web/API/Document/createElement https://developer.mozilla.org/ja/docs/Web/API/Document/createTextNode とりあえず画面を作れるなら、スクリプトはどんな操作をしているのかをよく見る事です。丁度ベストアンサーの内容もありますし。 HTMLに配置済みのtableタグを取得して、その下に、trタグを作る。更にtrタグの下にtdタグを3つ入れる。 tdタグにはMOUNTAINSから取り出した文字列をテキストノードで追加してあげると↓のHTMLになる。これを理解しないままベストアンサーの内容を使っても宝の持ち腐れになる。 --- <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> 頑張ってください。失礼します。

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

回答2件

ベストアンサー

お勉強のためになるならと

js
1
2let table = document.getElementById('targetTable');
3let names = ['name', 'height', 'place'];
4
5for (let i = 0; i< MOUNTAINS.length; i++){
6  let tr = document.createElement ('tr');
7  let row = MOUNTAINS[i];
8
9  for (let j = 0, J = 3; j < J; j++) {
10    let td = document.createElement ('td');
11    let name = names[j];
12    let text = row[name];
13    let tNode = document.createTextNode (text);
14    td.appendChild (tNode);
15    tr.appendChild (td);
16  }
17  table.appendChild (tr);
18}

javascriptは関数型の言語なのだから使いまわせるように考えるべきです。
私が普段使っている関数は以下。

js
1
2function ary2tbody (ary, tbody=document.createElement('tbody')) {
3  return ary.reduce((a,b)=>(b.reduce((c,d)=>(c.insertCell().textContent=d,c),a.insertRow()),a),tbody);
4}
5

(上を)応用すると

js
1const
2  thead = targetTable.createTHead(),
3  th = [...Object.keys(MOUNTAINS[0])],
4  ary = MOUNTAINS.map(a=>[...Object.values(a)]);
5
6function ary2tbody (ary, tbody=document.createElement('tbody')) {
7  return ary.reduce((a,b)=>(b.reduce((c,d)=>(c.insertCell().textContent=d,c),a.insertRow()),a),tbody);
8}
9
10targetTable.appendChild (ary2tbody ([th]), thead);
11targetTable.appendChild (ary2tbody (ary));
12