JavaScript 配列をテーブルの表に反映させたい

前提

配列になっているオブジェクトの内容を、ボタンを押下するとhtmlのテーブルに排出し、反映するという処理をしたいです。
理想しているのが、

　　　名前　　年齢　　住所
１　　lpp 10 sssss
2
3
4

という表を作りたいです。
名前、年齢、住所は反映できたのですが、左側の番号の追加が出来ずに困っています。
連想配列に追加する方法を調べいくつか試しましたが、上手くいきませんでした。

また、forEachでループしているのにiの変数が0と1から足されて行かないのかという理由も分かりません。
至らない点ばかりですが、ご教授して頂けますと幸いです。

発生している問題・エラーメッセージ

表の左側の数字を追加したい。

該当のソースコード

JavaScript

const adress =[
{name:'lpp',age:10,address:'sssss'},
{name:'takaki',age:28,address:'aaaa'},
{name:'saitou',age:55,address:'ssss'},
{name:'loa',age:35,address:'dddd'},
{name:'konn',age:9,address:'ccc'},
{name:'saki',age:23,address:'xxxx'},
{name:'lpl',age:45,address:'zzz'},
{name:'asd',age:22,address:'vvvv'},
{name:'xxx',age:33,address:'eeee'},
];

function check(){
console.log(adress);
adress.forEach((item)=>{
let i = 0;
adress.num=i;
i++;

const participantList = document.getElementById("participantList");
let tr =  document.createElement("tr");
participantList.appendChild(tr);
// console.log(item);

const obj = Object.entries(item);  


// console.log(tr);
// console.log(obj);
obj.forEach((arr)=>{
    const td = document.createElement("td");
    console.log(td);
    
   
    td.textContent = arr[1] 
  
//     console.log(arr);
tr.appendChild(td);
    // const btn = document.getElementById("btn");
   
    
});
btn.style.display="none"});

}

html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../js/for_05.js"></script> </head> <body> <main>  <table> <thead> <tr> <th class="null"></th> <th>お名前</th> <th class="red">年齢</th> <th class="orange">住所</th> </tr> </thead> <tbody id="participantList"></tbody> </table> <style> table{ border-collapse: collapse; } th,tr,td{ border: solid black 1px; } th{ padding:10px 50px; } .null{ padding: 10px 30px; } .red{ background-color: brown; } .orange{ background-color: orange; } </style> <input type="button" value="リスト表示" id="btn" onclick="check()"> <style> #btn{ display: block; margin: 30px 180px; padding: 10px 20px; }

</style>

</main> </body> </html>

試したこと

for文で書き直したり、配列に追加する方法をいくつか試した。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

noa_0012

2022/10/17 15:50

初めての投稿でコードの部分が上手く投稿できておらず、見づらくなってしまい申し訳ございません。

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

回答2件

まず、質問にあるコードで一点あまりよろしくない部分があります。

javascript
1const obj = Object.entries(item);

の部分です。これは itemがたとえば { name: 'lpp', age: 10, address: 'sssss' } の場合に、obj には以下のような（キーと値の組である配列の)配列

javascript
1[ [ 'name', 'lpp' ], ['age', 10], ['address', 'sssss'] ]

が返されることを期待しているものと思いますが、オブジェクトのプロパティには順序がないので、上記のような並び順の配列になることは保証されていません。
つまり分かり易くいうと obj に

javascript
1[ ['age', 10] , ['address', 'sssss'], [ 'name', 'lpp' ] ]

という配列が返ってきたとしても誰にも文句を言えませんということです。

なので、表の列として並べたい順にプロパティ名の文字列を並べた配列を持っておくのが安全です。今回の場合オブジェクトのプロパティにはない行番号も表示したいので、これを num として以下のような配列を用意しておきます。

javascript
1const columnKeys = ['num', 'name', 'age', 'address'];

これを使って、テーブルのデータ行に address オブジェクトの配列の内容を表示させるには、たとえば以下のようにします。

javascript
1const rows = addresses.map((adr, i) => {
2  const row = document.createElement('tr');
3  const cols = columnKeys.map(key => {
4    const td = document.createElement('td');
5    td.textContent = key === 'num' ? i + 1 : adr[key];
6    return td;
7  });
8  row.append(...cols);
9  return row;
10});
11
12document.getElementById('participantList').append(...rows);

細かいところですが、上記で住所データの配列の変数名を address の複数形 addresses にしています。このように配列の変数名はできるだけ複数形にしたほうがよいでしょう。

確認用codepen 👉 https://codepen.io/su507/pen/RwyOyvE?editors=0010

投稿2022/10/17 16:55

編集2022/10/17 18:20

退会済みユーザー

総合スコア0

noa_0012

2022/10/17 17:53

新しいやり方があるという事を知り、また勉強をすることが出来ましたありがとうございます。変数など細かいことにも気を付けていきます。大変助かりました。

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

ベストアンサー

①「forEachでループしているのにiの変数が0と1から足されて行かないのかという理由も分かりません。」
→ forEach の内側で i を宣言・初期化しているからです。
内側で初期化するということは、反復するたびに i が初期化されるということですから、0のままになってしまいます。
したがって下記のように forEach の外側で宣言・初期化します。

js
1    function check() {
2      console.log(adress);
3      let i = 0;  # forEach の外側で初期化
4      adress.forEach((item) => {
5        adress.num=i;
6        i++;
7以下略

②「左側の番号の追加が出来ずに困っています。」
→ adress.num=i; としていますが、これだともとの adress という配列オブジェクトに num:1 というプロパティを付け加えるだけですので、意図した動作になりません。

obj の構造を調べるため
const obj = Object.entries(item);
の次に
console.log(obj);
を追加して実行してみると

js
1[
2 ['name', 'takaki'],
3 ['age', 28],
4 ['address', 'aaaa']
5]

という形で二次元配列になっていることがわかります。
その後

js
1       obj.forEach((arr) => {
2          const td = document.createElement("td");
3          td.textContent = arr[1]
4          tr.appendChild(td);
5        });

でTableを作っています。
ここで
td.textContent = arr[1]
より、各要素の2番目を Table のデータとしているのですから、
上記の２次元配列の先頭に「行番号を2つ目にもつ配列」を追加できればよい、ということになります。

言い換えると、obj を

js
1[
2 ['num', 行番号],   # 追加したい要素
3 ['name', 'takaki'],
4 ['age', 28],
5 ['address', 'aaaa']
6]

というような形にできればよい、ということです。

配列の任意の位置に要素を追加するにはspliceを使います。
配列の最初に追加する場合

js
1        obj.splice(0,0,<追加したい要素>);

と書けますので

        obj.splice(0,0,["num", i]);

と書けばよいということになります。

上記に基づいて check 関数を書き直すと下記のようになります。

js
1    function check() {
2      let i = 0;
3      adress.forEach(item => {
4        i++;
5        const participantList = document.getElementById("participantList");
6        let tr = document.createElement("tr");
7        participantList.appendChild(tr);
8
9        const obj = Object.entries(item);
10        obj.splice(0,0,["num", i]);
11
12        obj.forEach((arr) => {
13          const td = document.createElement("td");
14          td.textContent = arr[1];
15          tr.appendChild(td);
16        });
17        btn.style.display = "none";
18      });
19    }

投稿2022/10/17 16:47

編集2022/10/17 16:48

退会済みユーザー

総合スコア0

noa_0012

2022/10/17 17:48

ご教授ありがとうございます。 obj.splice(0,0,["num", i]);を追加しコンソールで確認してみたのですが、 0: {name: 'lpp', age: 10, address: 'sssssss'} のような形で配列の中に数字が入っておらず、htmlの方にも反映されていなかったです。 iについては、0,1,2,3～と解決しておりましたありがとうございます。

noa_0012

2022/10/17 17:51

申し訳ございません。私が打ち間違えをしておりました。無事出来ました本当にありがとうございました。勉強になりました。

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

あなたの回答