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

Question

前提

ここに質問の内容を詳しく書いてください。
（例）
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）

該当のソースコード

<script>
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}

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>

試したこと

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

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

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

Comments

[Cocode]

タグには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]

説明が不十分かつ、分かりにくくて失礼しました。
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>
です。

Answer 1

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

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

Comments

[rio447]

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

Answer 2

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

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

Comments

[rio447]

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