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

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

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

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

Q&A

解決済

[javascript]foreachで多次元配列の繰り返し処理をしたい

rio447
rio447

総合スコア3

JavaScript

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

2回答

0グッド

1クリップ

231閲覧

投稿2022/11/28 14:10

前提

ここに質問の内容を詳しく書いてください。
(例)
javascriptで選択した選手情報をデータベースから抽出して、一覧画面に表示するページを作っています。
マスタデータをPHPで個人別に各配列として取得後、以下の問題が発生しました。

実現したいこと

  • 選択した選手の情報をそれぞれ、

選手1:save_2(名前フリガナ),save_3(名前),save_8(誕生日),save_11(出身),save_14(ポジション)
選手2:save_4(名前フリガナ),save_5(名前),save_9(誕生日),save_12(出身),save_15(ポジション)
選手3:save_6(名前フリガナ),save_7(名前),save_10(誕生日),save_13(出身),save_16(ポジション)
に表示したい。

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

・複数人選手を選択した時、全ての項目に同一の選手の情報しか表示されません。

例: 選択選手:1.長友佑都、2.堂安律、3.伊藤洋輝 選手1:save_2(イトウヒロキ),save_3(伊藤洋輝),save_8(1999.05.12),save_11(ジュビロ磐田),save_14(DF) 選手2:save_4(イトウヒロキ),save_5(伊藤洋輝),save_9(1999.05.12),save_12(ジュビロ磐田),save_15(DF) 選手3:save_6(イトウヒロキ),save_7(伊藤洋輝),save_10(1999.05.12),save_13(ジュビロ磐田),save_16(DF)

該当のソースコード

javascript

1<script> 2response : Array(3) 3 0 : {name:長友佑都, name_kana:ナガトモユウト, birthday:1986.09.16, team:FC東京, position:DF} 4 1 : {name:堂安律, name_kana:ドウアンリツ, birthday:1998.06.16, team:ガンバ大阪ユース, position:MF/FW} 5 2 : {name:伊藤洋輝, name_kana:イトウヒロキ, birthday:1999.05.12,team:ジュビロ磐田, position:DF} 6 7response.forEach((item,index) =>{ 8 for(var i = 0; i < response.length; i++){ 9 $('input[name="save_' + (2 + (i * 2)) + '"]').val(item['name_kana'])|| null; 10 $('input[name="save_' + (3 + (i * 2)) + '"]').val(item['name'])|| null; 11 $('input[name="save_' + (8 + i) + '"]').val(item['birthday'])|| null; 12 $('input[name="save_' + (11 + i) + '"]').val(item['team'])|| null; 13 $('input[name="save_' + (14 + i) + '"]').val(item['position'])|| null; 14 } 15}); 16</script>

試したこと

・index[0~2]と指定したところ、「インデックスが見つかりません」、「インデックスは関数ではありません」等のエラーで正常出力できませんでした。
・ループを必要としない処理、一名のみ選択して実行した際は「選手1」に選択した選手の情報が正しく表示されました。
・[let indexcount = 0;]の変数を挿入しましたが、上記の結果と同じでした。

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

javascriptについての知識が浅い初心者なので、単純な見落とし・基礎知識不足があるかもしれません。
ご教授の程、よろしくお願いします。

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

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

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

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

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

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

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

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

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

Cocode

2022/11/28 19:09 編集

タグにはJavaScriptとしかありませんが、コードをみるとjQueryのようです。 ピュアJavaScriptとjQueryどちらをご希望ですか? あとは、この部分 response : Array(3) 0 : {name:長友佑都, name_kana:ナガトモユウト, birthday:1986.09.16, team:FC東京, position:DF} 1 : {name:堂安律, name_kana:ドウアンリツ, birthday:1998.06.16, team:ガンバ大阪ユース, position:MF/FW} 2 : {name:伊藤洋輝, name_kana:イトウヒロキ, birthday:1999.05.12,team:ジュビロ磐田, position:DF} このような記法はないと思うのですが、これは何を表現しているのでしょうか? 文法エラーがでそうですが、文法エラーは出ていないのでしょうか?
rio447

2022/11/29 12:47

説明が不十分かつ、分かりにくくて失礼しました。 response : Array(3)はPHPにてデータベースより抽出した情報です。 実際のscript内容は、 <script> response.forEach((item,index) =>{ for(var i = 0; i < response.length; i++){ $('input[name="save_' + (2 + (i * 2)) + '"]').val(item['name_kana'])|| null; $('input[name="save_' + (3 + (i * 2)) + '"]').val(item['name'])|| null; $('input[name="save_' + (8 + i) + '"]').val(item['birthday'])|| null; $('input[name="save_' + (11 + i) + '"]').val(item['team'])|| null; $('input[name="save_' + (14 + i) + '"]').val(item['position'])|| null; } }); </script> です。

回答2

2

nameをつかったアクセスは非効率ですし汎用性に欠けます
とはいえとりあえずそのまま適用するとこんな感じです

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const response=[ 4 {name:"長友佑都", name_kana:"ナガトモユウト",birthday:"1986.09.16",team:"FC東京", position:"DF"}, 5 {name:"堂安律", name_kana:"ドウアンリツ", birthday:"1998.06.16",team:"ガンバ大阪ユース",position:"MF/FW"}, 6 {name:"伊藤洋輝", name_kana:"イトウヒロキ", birthday:"1999.05.12",team:"ジュビロ磐田", position:"DF"}, 7 ]; 8 response.forEach((item,i) =>{ 9 [ 10 [i*2+2,'name'], 11 [i*2+3,'name_kana'], 12 [i+8,'birthday'], 13 [i+11,'team'], 14 [i+14,'position'], 15 ].forEach(j=>{ 16 document.querySelector(`[name="save_${j[0]}"]`).value=item[j[1]]; 17 }); 18 }); 19}); 20</script> 21選手1<input name="save_2"><input name="save_3"><input name="save_8"><input name="save_11"><input name="save_14"><br> 22選手2<input name="save_4"><input name="save_5"><input name="save_9"><input name="save_12"><input name="save_15"><br> 23選手3<input name="save_6"><input name="save_7"><input name="save_10"><input name="save_13"><input name="save_16"><br>

投稿2022/11/29 00:37

yambejp

総合スコア109126

spoofy_dragon, rio447を押しています

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

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

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

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

回答へのコメント

rio447

2022/11/29 12:51

ありがとうございます。 提示頂いたコードで試行したところ、正常動作確認できました。 >nameをつかったアクセスは非効率ですし汎用性に欠けます ご指摘ありがとうございます。今後のコード作成の参考にします。

1

ベストアンサー

responseArray(3) ということなのですかね。であれば多次元配列ではなく1次元配列なので、forEach()for のどちらかだけでいいです。

forEach() を使う場合、for は消して iindex にしましょう。
for を使う場合、forEach() は消して itemresponse[i] にしましょう。

投稿2022/11/28 22:04

int32_t

総合スコア17265

rio447❤️を押しています

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

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

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

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

回答へのコメント

rio447

2022/11/29 12:44

ありがとうございます。 forTach()、forそれぞれで実行したところ、無事に正常動作が確認できました。 多次元配列でなく、一次元配列だった点もご指摘いただきありがとうございました。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

JavaScript

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