Q&A
さすがに、HTMLと、JSON取得の部分のJavaScript構文はありますよね？
せめて、それだけでも質問本文に記載しましょう。
でないと丸投げ質問になっちゃいます。
javascriptの初歩的なことでお恥ずかしいです。
例えばプロフィールページを作るときに
人数分の名前や特技等の数値はJSONファイルに格納してあって、
その数値を呼び出して一人分のプロフィールページを作りたいとします。
htmlで名前とか特技の部分を穴あきにしたコードを書き、
JSONファイルから持ってきた数値で穴を埋めてプロフィールページを表示させたいです。
その場合、javascript部分の記述はどのように書けばスマート（もしくは簡単）でしょうか。
プロフィールページは人数分作ることを前提にしてるのでひな形として使いやすいのが望ましいです。（ｈｔｍｌの生成自体は手動、つまりコピペで人数分作る感じを想定してます。）
未熟さが伝わることかと思いますが回答は初心者向けを意識せずにご自分の言葉で書いてもらって構いません。
（追記）
<body> <div id="display"> <div id="base" class="main-wrapper" style="display:none"> <h2> <span class="name"></span> さん </h2> <a class="personalUrl" href=""> <img class="imgUrl" src="" alt="自画像"> </a> </div> </div> <script type="application/javascript"> var controller = new controller(); controller.post("（jsonのurl）", {}, function (data) { var i = 0; var list = $("#base").clone(); list.find(".name").text(data[i].name); list.find(".imgUrl").attr("src", data[i].imgUrl); list.find(".personalUrl").attr("href", data[i].personalUrl); list.show(); $("#display").append(list); }); </script> </body>
例えばこんなんで出力として
〇〇さん
（リンク付きの自画像）
みたいに一応成功します。
元はループ処理で「１ページに色んな人の情報をリスト表示するページ」に使われてた関数をいじって作ったので、あまりスマートじゃない気がします。
いい発想だと思います。たぶん、詳しい人はサーバー側でテンプレートを埋めてとか、クライアント側で React や Vue.js などを使うという発想になると思いますが、初心者ならなるべくシンプルに生の JS か jQuery で地道に実装するのがいいんじゃないでしょうか。
>javascriptの初歩的なことでお恥ずかしいです。
質問書く前にこう書かれても困りますね。
この何十文字かを書く労力を質問要件の充実にあててください。
質問には「初心者アイコン」がつけられるので、そこでとどめてください。
※自己紹介や要件に関係ない但し書きなど、ノイズに感じる人も少なくないです
質問は恥でも何でもなく、問題解決のためのコミュニケーション手段です。
質問サイトで、サイトの主旨に沿った質問であれば質問内容のレベルは関係ないと思います。（逆に卑下され過ぎると答えづらい。初歩的だと自己評価できるならなぜ質問するの？など疑問もある）
回答1件
0
ベストアンサー
こんにちは。
一案を挙げておきます。
-
テンプレートになる
divを、DOMの中にdisplay:noneで持っておくのではなく、HTMLの文字列として持っておきます。 -
その際に、名前やURLを後から埋め込めるように、テンプレート文字列 を使った関数にしておきます。
具体例は以下です。
JSONが以下のようなものであるとします。
json
1{ 2 "name": "山田太郎", 3 "imgUrl": "https://dummyimage.com/100x100/1e00ff/fff.png&text=TY", 4 "personalUrl": "https://example.com/persons/1" 5}
上記に対応して、以下のように、テンプレート文字列の該当箇所を、引数の各変数で置き換えたHTMLを返す関数を作っておきます。
javascript
1 const personHTML = ({ name, imgUrl, personalUrl }) => 2 `<div class="main-wrapper"> 3 <h2> 4 <span class="name">${name}</span> 5 さん 6 </h2> 7 <a class="personalUrl" href="${personalUrl}"> 8 <img class="imgUrl" src="${imgUrl}" alt="自画像"> 9 </a> 10 </div>`;
上記を使えば、#displayへの追加は以下のようにできます。
javascript
1$.getJSON(url).then(data => { 2 $('#display').append(personHTML(data)); 3 })
以下は、上記の動作確認用のサンプルです。
- 動作確認用CodePen: https://codepen.io/jun68ykt/pen/MWKgNRd?editors=1010
（※上記のサンプルで使っているmockableのエンドポイントは、このご質問の解決後、削除します。ご了承ください）
以上、参考になれば幸いです。
追記
以下のような関数（の入っている変数）addPerson
javascript
1 const addPerson = ({ name, imgUrl, personalUrl }) => { 2 $('#display').append( 3 `<div class="main-wrapper"> 4 <h2> 5 <span class="name">${name}</span> 6 さん 7 </h2> 8 <a class="personalUrl" href="${personalUrl}"> 9 <img class="imgUrl" src="${imgUrl}" alt="自画像"> 10 </a> 11 </div>`); 12 };
を作っておくと、$.getJSON の成功時は、以下のようにさらに手短に書けます。
javascript
1$.getJSON(url).then(addPerson);
- 動作確認用CodePen: https://codepen.io/jun68ykt/pen/yLeLaVE?editors=1010
投稿2020/06/02 15:24
編集2020/06/02 23:56
総合スコア9058
あなたの回答
tips
プレビュー
