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

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

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

SQL(Structured Query Language)は、リレーショナルデータベース管理システム (RDBMS)のデータベース言語です。大きく分けて、データ定義言語(DDL)、データ操作言語(DML)、データ制御言語(DCL)の3つで構成されており、プログラム上でSQL文を生成して、RDBMSに命令を出し、RDBに必要なデータを格納できます。また、格納したデータを引き出すことも可能です。

XHR

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

1465閲覧

jsonデータからJavascriptでHTMLを書く事に悩んでます。

syuichiroh

総合スコア4

SQL

SQL(Structured Query Language)は、リレーショナルデータベース管理システム (RDBMS)のデータベース言語です。大きく分けて、データ定義言語(DDL)、データ操作言語(DML)、データ制御言語(DCL)の3つで構成されており、プログラム上でSQL文を生成して、RDBMSに命令を出し、RDBに必要なデータを格納できます。また、格納したデータを引き出すことも可能です。

XHR

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/12/26 05:00

編集2021/12/26 08:58

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

php

1<?php foreach ($days as $day) : ?> 2 <div class="list"> 3 <?php print(htmlspecialchars($day['day_data'], ENT_QUOTES)); ?> 4 /<?php print(htmlspecialchars($day['memo'], ENT_QUOTES)); ?> 5 <span class="price"><?php print(htmlspecialchars($day['day_price'], ENT_QUOTES)); ?></span> 6 </div>

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

html

1<div class="list">"2021-12-10 / ガンダム" <span class="price">5000</span></div> 2<div class="list">"2021-12-10 / eva "<span class="price">8000</span></div> 3<div class="list">"2021-12-10 / はなはな" <span class="price">12000</span></div>

課題:
jsのXHRでAjaxです。

javascript

1function period() { 2 if (start != '' && end != '' && id != '') { 3 4 let data = { 5 "aid": id, 6 "ast": start, 7 "aend": end 8 } 9 let json = JSON.stringify(data); 10 11 var xhr = new XMLHttpRequest(); 12 xhr.open("POST", "loop_ajax.php"); 13 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8"); 14 xhr.send(json); 15 xhr.onreadystatechange = function () { 16 try { 17 if (xhr.readyState == 4) { 18 if (xhr.status == 200) { 19 let result = JSON.parse(xhr.response); 20 console.log(result); 21 22 //処理 23 24 } else { 25 } 26 } else { 27 } 28 } catch (e) { 29 } 30 }; 31 } 32 33} 34

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

javascript

1console.log(result);

の実行結果は以下です(chrome:検証consoleでの表示)

JSON

1(2) [{}, {}] 20: {id_link: '3', day_data: '2021-12-18', day_price: '2000', memo: ''} 31: {id_link: '3', day_data: '2021-12-23', day_price: '13000', memo: ''} 4*複数在り

このJSON形式からのHTML化に苦戦中です。
もう一度最終形

HTML

1<div class="list">"2021-12-10 / ガンダム" <span class="price">5000</span></div> 2<div class="list">"2021-12-10 / eva "<span class="price">8000</span></div> 3<div class="list">"2021-12-10 / はなはな" <span class="price">12000</span></div>

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

また、ちょっと考え方を変えてみたアイデアがあります。
JSONをサーバーサイドに送った際、PHPのforeachでHTMLを作り上げてresultに返すのはどうか。。
しかし、件数が多ければ苦戦しそうな感じもします。
調べてもそれらしい記事は探せませんでした。
サーバー側で作り上げるのは有りでしょうか?

宜しくお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

自己解決

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

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

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

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

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

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

JAVASCRIPT

1 2 //処理 3 4 let result = JSON.parse(xhr.response); 5 let jsons = document.getElementById("jsons"); 6 jsons.innerHTML = ''; 7 loop(result); 8 9 } else { 10 } 11 } else { 12 } 13 } catch (e) { 14 } 15 }; 16 } 17} 18 19let s = ''; 20let ss =''; 21 22function loop(result) { 23 for (var key in result) { 24 if (result.hasOwnProperty(key)) { 25 s += ' <div class="list"> ' + result[key].day_data + ' / ' + result[key].memo + ' <span class="price"> ' + result[key].day_price + '</span></div>'; 26 } 27 } 28 ss = s; 29 s=''; 30 divin(ss); 31} 32 33function divin(ss) { 34 let js2 = document.getElementById("jsons2"); 35 js2.innerHTML = ss; 36 console.log(js2); 37}

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

投稿2021/12/27 05:51

syuichiroh

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

//api.php

PHP

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

だとして
//sample.htm

javascript

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

投稿2021/12/27 01:46

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

syuichiroh

2021/12/27 05:22

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

2021/12/27 05:28

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

2021/12/27 05:56

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

2021/12/27 06:26

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

0

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

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

JavaScript

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

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

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

投稿2021/12/27 00:00

tabuu

総合スコア2449

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

syuichiroh

2021/12/27 04:30

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

2021/12/27 04:37

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

0

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上にある時」です。

投稿2021/12/26 11:12

編集2021/12/26 11:14
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

syuichiroh

2021/12/27 04:24

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問