jsonデータからJavascriptでＨＴＭＬを書く事に悩んでます。

Question

データベースからsqlで抜いてきたデータがあり、それをphpでforeachさせhtmlを作成したのが以下です。

<?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>

完成系は以下です(日付、メモ、価格の三つがデータベースから取ってきた物)

<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です。

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) {
      }
    };
  }

}

これから書く「処理」手前の

console.log(result);

の実行結果は以下です（chrome：検証consoleでの表示）

(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化に苦戦中です。
もう一度最終形

<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に返すのはどうか。。
しかし、件数が多ければ苦戦しそうな感じもします。
調べてもそれらしい記事は探せませんでした。
サーバー側で作り上げるのは有りでしょうか？

宜しくお願い致します。

Answer 1

皆様、非常に有益な情報を有難う御座います。自身でも組んではいたのですが中々上手くいかず苦戦していました。
teratailの流れをよく知りませんので、自己解決に書いていいモノか悩みましたが、あえて書かせて頂きます。理想の流れがあれば教えて下さればお願い致します。

m.ts10806 さん。僕の好みになりますが細かい情報が詰まっており非常に勉強になりました。有難うございます。　今回は実装してませんが、php回しもチャレンジしたいと思います。

tabuu さん。for文の基礎を有難うございます。phpでloop処理を普段してますが、jsとなると途端にダメになってしまいます。そんな中、このコードを見て応用を考え自己解決に至りました。

yambejp さん。fetchAPIやmapに非常に興味があったので理解を深められる事に凄く嬉しさを感じました。勉強の対象とさせて頂きます。

以下、皆さんのコードを見て応用し自己解決したコードになります。
多少HTML文にタグを足しました。また、コードの中で理想では無い形態などあるのではと思う時があります。もし、ご指摘があれば是非お願い致します。

一応ajaxの処理部分からのコードを載せておきます。連続}}}} の後からhtml形成です。

            //処理

            let result = JSON.parse(xhr.response);                      
            let jsons = document.getElementById("jsons");
            jsons.innerHTML = '';            
            loop(result);

          } else {
          }
        } else {
        }
      } catch (e) {
      }
    };
  }
}

let s = '';
let ss ='';

function loop(result) {
  for (var key in result) {
    if (result.hasOwnProperty(key)) {
      s += ' <div class="list"> ' + result[key].day_data + ' / ' + result[key].memo + ' <span class="price"> ' + result[key].day_price + '</span></div>';
    }
  }
  ss = s;
  s=''; 
  divin(ss);  
}

function divin(ss) {
  let js2 = document.getElementById("jsons2");
  js2.innerHTML = ss;
  console.log(js2);
}

指摘も色々頂きましたが、個人的に決して投げやりではありません。
プログラムは書き方が多様にあるので自分の書き方の追及はしますが、それぞれの書き方を見たい気持ちが大きいです。また、それをミックスして良いものが出来たり、自分流を作りたいのです。
ですので修正などしませんでした。ご指摘していただいた方々、申し訳ありませんでした。

Answer 2

//api.php

<?PHP
$data=[
["day_data"=>"2021-12-10","memo"=>"ガンダム","day_price"=>5000],
["day_data"=>"2021-12-10","memo"=>"eva","day_price"=>8000],
["day_data"=>"2021-12-10","memo"=>"はなはな","day_price"=>12000],
];
print json_encode($data);

だとして
//sample.htm

<script>
window.addEventListener('DOMContentLoaded',async ()=>{
  const url="api.php";
  const data=await fetch(url).then(res=>res.json());
  data.map(({day_data,memo,day_price})=>[
    document.createTextNode(`"${day_data} / ${memo}"`),
    Object.assign(document.createElement('span'),{className:"price",textContent:`${day_price}`}),
    ].reduce((x,y)=>(x.appendChild(y),x),Object.assign(document.createElement('div'),{className:"list"}))
  ).forEach(x=>document.querySelector('#view').appendChild(x));
});
</script>
<div id="view"></div>

Comments

[syuichiroh]

回答有難うございます。凄いです！　これは fetchAPIですか。　一度チャレンジしてみようとfetch記事を読んでみたものの難解で諦めてました。しかし、こう見てもやはり解読が難しいと思ってしまいます。　でも、このモデルを見せて頂いた事で時間を掛けて解いていこうと思います。　有益なコードを有難うございます。

[yambejp]

fetchは素のXHR(ajax)よりはるかに単純で扱いやすいAPIです
promise/async/awaitで感覚が合わない人もいるかもしれませんが
それはajaxであっても同じなので、fetchをベースに検討されることをおすすめします

[syuichiroh]

はい。興味がめちゃくちゃあったので凄く助かります。
また、今、自己解決で自分の個人的なコードを書きました。が、、teratailのベストアンサーは自己解決になってしまうようです。ベストアンサーをyambejpさんにつけようと思ってました。無知ですいません。
今回理解したので次回からはしっかりベストアンサーを押していきたいと思います。有難うございました。

[yambejp]

今となってはそんなにベストアンサーにこだわり無いので大丈夫ですよ
参考程度でもお役に立てれば幸いです

Answer 3

JSに不慣れでPHPみたいに書けない事は知っていたのですが、
foreachで4種の値を持つJSONデータを思い通りに動かせません。

一番単純なのは以下のような感じです。
文字列結合にせずdocument.createElement等でHTML要素を作成してもよいです。

for (r of result) {
    s = '<div class="list">"' + r.day_data + ' / ' + r.memo + '" <span class="price">' + r.day_price + '</span></div>';
}

JSONをサーバーサイドに送った際、PHPのforeachでHTMLを作り上げてresultに返すのはどうか。。

これもアリですが、その場合はAjaxにせず最初から最後までサーバ側で処理しても良いかと思います。
データ量やUIによりますが。

Comments

[syuichiroh]

なるほど。POSTで送る奴ですね。　今、ajaxの勉強に重点をおいてまして、ライブラリーなども使わずやってます。POST処理の方が簡単ではあるのですが、成長したくて。にしても僕にJSの知識が無さすぎるのが難点です。JSでのHTML文作成も課題でして、僕の頭では＋＝で追加していくしか無かったです。勉強になります。有難うございます。

[syuichiroh]

今試したところ、複数の配列が存在した場合、一文の制作しか出来ない事に気付きました。でも、for文を用いた成文コードに引き出しが増えました。有難うございます。

Answer 4

foreachで4種の値を持つJSONデータを思い通りに動かせません。

PHPで言うところの「連想配列」が返ってきてるので、eachしてHTMLをcreateして値セットして入れたい場所にappendする形になりますが、

JSONをサーバーサイドに送った際、PHPのforeachでHTMLを作り上げてresultに返すのはどうか。。

しかし、件数が多ければ苦戦しそうな感じもします。

HTMLの量が多いのなら、PHPでHTML作って返した方がパフォーマンスは良いです。
JavaScriptでHTMLをcreateしてセットするのは結構重たいです。
特に一覧など数十件数百件のリストを表示するような場合はPHPからのレスポンスはその部分のHTMLのほうが良いです。
なので、レスポンスもJSONじゃなく、HTMLですね。

私はどちらも用いますが、JSONを返して使うときは「”削除処理”や”更新処理”のようにレスポンスがOK,NGのみで済むような処理」か、
「入力コントロールのような値だけセットしたらいい要素が既にHTML上にある時」です。

Comments

[syuichiroh]

回答有難うございます。なるほど。proglamの記事を色々見ているとJSで制作しているケースがほとんどです。なので勝手にJSでの作業が効率が良いと思い込んでいました。新たな知識と課題、有難うございます。