【Laravel】@jsonでjavascriptに送ったものを、foreachで回したい

Question

前提・実現したいこと

コントローラーからjson形式で受け取ったものを、jsのforeachでそれぞれ表示させたい。

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

実際にforeachで回したら、最後だけが表示される

該当のソースコード

<div id="test-head"></div>

<script>
   var postAtMonthOnly = @json($postAtMonthOnly);
                
   const testHead = document.getElementById("test-head");
                
   postAtMonthOnly.forEach( postAt => {
   　　　document.getElementById("test-head").innerHTML = postAt;
   })
</script>

試したこと

@json($postAtMonthOnly)に配列が存在するか確認したところ、ちゃんとありました。

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

Laravel8

Answer 1

PHPやJavaScriptに限らずほとんどの言語でやってしまいがちですが

innerHTML = postAt

ループ内で上書きし続けてます。

「とりあえず」ならforeachせずともpostAtMonthOnly(これの中身どうなってる？)をjoinするだけで良さそうですけど、「それぞれ」をどのように表示したいか次第です。

Comments

[yukimidaihuku]

innerHTMLで一回一回htmlに追加されるわけではないということですね！
postAtMonthOnlyは、SQLデータの作成日の月だけを取得した配列です。
今回は、それを1コずつ縦に並べるのが目的でした。

[m.ts10806]

追加ならappend
そのあたりはMDNなどリファレンス確認してください。
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/ja/docs/Web/API/Element/append

Answer 2

そやの〜、ほなら、こない

- <div id="test-head"></div>
+ <ul id="test-head"></ul>

にしてtest-headを <ul> にしといて、

let monthsHtml = '';
postAtMonthOnly.forEach(postAt => { monthsHtml += `<li>${postAt}</li>`; });

document.getElementById("test-head").innerHTML = monthsHtml;

とかってやれば、postAtMonthOnlyの要素がすべてリストされんで。そやけど、これやったら、monthsHtml を作るのに、forEachやなしにmap使って

const monthsHtml = postAtMonthOnly.map(postAt => `<li>${postAt}</li>`).join('');

ってやるほうが、ええかもしれへん ➡ サンプル

Comments

[yukimidaihuku]

monthsHtmlにタグを追加した状態で入れ替えてから、innerHTMLで追加するということですね！
やってみたら成功しました。ありがとうございます。