質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

noa_0012
noa_0012

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

1グッド

0クリップ

616閲覧

投稿2022/10/17 15:47

前提

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

   名前  年齢  住所
1  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> <!-- <p id="p"></p> --> <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/ツールのバージョンなど)

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

Cocode👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

noa_0012

2022/10/17 15:50

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

回答2

3

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

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 にしています。このように配列の変数名はできるだけ複数形にしたほうがよいでしょう。

投稿2022/10/17 16:55

編集2022/10/17 18:20
退会済みユーザー

退会済みユーザー

総合スコア0

uky, Cocode, noa_0012👏を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

noa_0012

2022/10/17 17:53

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

3

ベストアンサー

①「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次元配列の先頭に「行番号を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
qnoir

総合スコア7804

uky, Cocode, noa_0012👏を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。