データベースからsqlで抜いてきたデータがあり、それをphpでforeachさせhtmlを作成したのが以下です。
php
<?php foreach ($days as $day) : ?> <div class="list"> <?php print(htmlspecialchars($day['day_data'], ENT_QUOTES)); ?> /<?php print(htmlspecialchars($day['memo'], ENT_QUOTES)); ?> <span class="price"><?php print(htmlspecialchars($day['day_price'], ENT_QUOTES)); ?></span> </div>
完成系は以下です(日付、メモ、価格の三つがデータベースから取ってきた物)
html
<div class="list">"2021-12-10 / ガンダム" <span class="price">5000</span></div> <div class="list">"2021-12-10 / eva "<span class="price">8000</span></div> <div class="list">"2021-12-10 / はなはな" <span class="price">12000</span></div>
課題:
jsのXHRでAjaxです。
javascript
function period() { if (start != '' && end != '' && id != '') { let data = { "aid": id, "ast": start, "aend": end } let json = JSON.stringify(data); var xhr = new XMLHttpRequest(); xhr.open("POST", "loop_ajax.php"); xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8"); xhr.send(json); xhr.onreadystatechange = function () { try { if (xhr.readyState == 4) { if (xhr.status == 200) { let result = JSON.parse(xhr.response); console.log(result); //処理 } else { } } else { } } catch (e) { } }; } }
これから書く「処理」手前の
javascript
console.log(result);
の実行結果は以下です(chrome:検証consoleでの表示)
JSON
(2) [{…}, {…}] 0: {id_link: '3', day_data: '2021-12-18', day_price: '2000', memo: ''} 1: {id_link: '3', day_data: '2021-12-23', day_price: '13000', memo: ''} *複数在り
このJSON形式からのHTML化に苦戦中です。
もう一度最終形
HTML
<div class="list">"2021-12-10 / ガンダム" <span class="price">5000</span></div> <div class="list">"2021-12-10 / eva "<span class="price">8000</span></div> <div class="list">"2021-12-10 / はなはな" <span class="price">12000</span></div>
JSに不慣れでPHPみたいに書けない事は知っていたのですが、
foreachで4種の値を持つJSONデータを思い通りに動かせません。
どなたか解決いただけませんか?
また、ちょっと考え方を変えてみたアイデアがあります。
JSONをサーバーサイドに送った際、PHPのforeachでHTMLを作り上げてresultに返すのはどうか。。
しかし、件数が多ければ苦戦しそうな感じもします。
調べてもそれらしい記事は探せませんでした。
サーバー側で作り上げるのは有りでしょうか?
宜しくお願い致します。
まだ回答がついていません
会員登録して回答してみよう