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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

Q&A

解決済

9回答

4448閲覧

この記述のjsをもっと簡潔にしたいです。

ByronHasegawa

総合スコア255

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

0グッド

8クリップ

投稿2015/02/13 06:40

$(".tokyo-chuoku").append("<tr><th><span>" + json["category"] + "</span><a href='detail.php?id=" + json["id"] + "'><h4>" + json["title"] + "</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/" + json["address"] + "'>" + json["address"] + "</a></span></td><td><span class='txt'>" + json["tel"] + "</span></td><td><span class='txt'>" + json["business_hours"] + "</span></td><td><span class='txt'>" + json["holiday"] + "</span></td></tr>");

appendにある記述を簡潔にしたいです。

理想例:

area = ("<tr><th><span>" + json["category"] + "</span><a href='detail.php?id=" + json["id"] + "'><h4>" + json["title"] + "</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/" + json["address"] + "'>" + json["address"] + "</a></span></td><td><span class='txt'>" + json["tel"] + "</span></td><td><span class='txt'>" + json["business_hours"] + "</span></td><td><span class='txt'>" + json["holiday"] + "</span></td></tr>");

$(".tokyo-chuoku").append(area);

$(".tokyo-shibuyaku").append(area);

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

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

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

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

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

guest

回答9

0

求めているものから少し道はそれますが、append地獄だとタグ挿入などのメンテが大変なので
Handlebars.jsを使うと見やすく書けます。
…このままだと動かないかもですが…;

lang

1 2<script id="tmp01" type="text/x-handlebars-template"> 3 <tr> 4 <th> 5 <span>{{category}}</span> 6 <a href='detail.php?id={{id}}'><h4>{{title}}</h4></a> 7 </th> 8 <td> 9 <span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/{{address}}'>{{address}}</a></span> 10 </td> 11 <td><span class='txt'>{{tel}}</span></td> 12 <td><span class='txt'>{{business_hours}}</span></td> 13 <td><span class='txt'>{{holiday}}</span></td> 14 </tr> 15</script>

lang

1 var template = Handlebars.compile($("#tmp01").html()); 2 $("#tokyo-chuoku").append(template(json)); 3 $(".tokyo-shibuyaku").append(area);

投稿2015/02/13 11:53

編集2015/02/13 11:55
CyberMergina

総合スコア295

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

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

0

ベストアンサー

プレースホルダを置いて後から置換するのはどうでしょう?

lang

1var json1={ 2 category:'カテゴリ名', 3 id:'IDxxxx', 4 title:'タイトル', 5 address:'中央区XX町XXXX', 6 tel:'XX-XXXX-XXXX', 7 business_hours:'X:XX-X:XX', 8 holiday:'休日' 9} 10var json2={ 11 category:'カテゴリ名', 12 id:'IDxxxx', 13 title:'タイトル', 14 address:'渋谷区XX町XXXX', 15 tel:'XX-XXXX-XXXX', 16 business_hours:'X:XX-X:XX', 17 holiday:'休日' 18} 19area = "<tr><th><span>{{category}}</span><a href='detail.php?id={{id}}'><h4>{{title}}</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/{{address}}'>{{address}}</a></span></td><td><span class='txt'>{{tel}}</span></td><td><span class='txt'>{{business_hours}}</span></td><td><span class='txt'>{{holiday}}</span></td></tr>"; 20 21function placeHolder(str, json){ 22 for ( var k in json ){ 23 str = str.replace('{{'+k+'}}',json[k]); 24 }; 25 return str 26} 27 28$(".tokyo-chuoku").append(placeHolder(area,json1)); 29 30$(".tokyo-shibuyaku").append(placeHolder(area,json2));

投稿2015/02/13 09:30

Lhankor_Mhy

総合スコア35871

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

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

0

DOM生成用のヘルパーメソッドを作って、下記のような形で定義出来れば分かりやすいんじゃないかと。
ヘルパーメソッドは他の画面でも流用できますし。

lang

1 2// trタグ生成 ※他のタグのメソッドは割愛します 3var tr = function (attr, value) { 4 return '<tr' + attr + '>' + value + '</tr>'; 5} 6 7area = tr ('', 8 th ('', 9 span ('', json['category']), 10 a (" href=detail.php?id="+json['id'], h4 (json['title']) ) 11 ), 12 td ('', 13 span (" class='gmap_link'", 14 a (" class='i_map target='_blank'" + 15 "href='https://www.google.co.jp/maps/search/'" + json['address'], 16 json['address'] 17 ) 18 ) 19 ), 20 td ('', span (" class='txt'", json['tel']) ), 21 td ('', span (" class='txt'", json['business_hours']) ), 22 td ('', span (" class='txt'", json['holiday']) ) 23); 24 25$(".tokyo-chuoku").append(area);

投稿2015/02/13 10:19

k.tada

総合スコア1679

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

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

0

個人的にはhtmlとjavascriptは分けて記述したほうがメンテナンスとかしやすくなると思います。
たぶんセレクトボックスとかにチェックしたときに表示させるような仕様なのかなと推測してしたのように作ってみました。
※ちょっと長かったので多少データ省略させてもらいました。
appendを使うのはajaxで程よく整形されたhtmlを返す前提でないと仕様変更時にjavascriptの文字列結合と格闘する羽目になると思います。
apiなどからjsonで帰ってくるデータを使うとするとattrやtextで予め用意しておいた非表示のhtmlに値をうまく入れるほうが個人的にはすっきりします(あくまでも好みの問題かもしれませんが)

lang

1<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 2 3<script> 4 $(function(){ 5 6 //.areaInfoがクリックされたら 7 $('.areaInfo').click(function(){ 8 9 //これはたぶんajaxでとりますか? 10 var json = {category:'中央区',id:1,address:'cuouku'}; 11 12 //クリックされたdata-areaの値を変数areaに代入 13 //この後出てくるareaは'chuoku'という文字列になる 14 var area = $(this).attr('data-area'); 15 16 //この場合だと#chuoukuの子要素のa.detail_linkのhrefに「detail.php?id=1」が入る 17 $('#' + area + ' a.detail_link').attr("href","detail.php?id=" + json["id"]); 18 19 //この場合だと#chuoukuの子要素のh4.categoryに「中央区」が入る 20 $('#' + area + ' h4.category').text(json["category"]); 21 22 //この場合だと#chuoukuの子要素のh4.categoryのhref属性の値に 23 //「https://www.google.co.jp/maps/search/cuouku」が入る 24 var gmapUrl = "https://www.google.co.jp/maps/search/" + json["address"]; 25 $('#' + area + ' a.i_map').attr("href",gmapUrl); 26 27 //aタグのなかに「cuouku」が入る 28 $('#' + area + ' a.i_map').text(json["address"]); 29 30 //非表示のtrを表示させる。ただtrをtableだったか。。 31 //→とりあえず表示しますが、レイアウト上の問題があるかも 32 $('#' + area).css("display","table"); 33 34 });//.areaInfoクリックで発生する処理終了 35 36 }); 37 38</script> 39 40<a href='javascript:;' data-area="chuoku" class="areaInfo">中央区のデータを表示</a> 41<table> 42 <tr id='chuoku' style="display:none"> 43 <th> 44 <span class="category"> 45 <a href="" class="detail_link"><h4 class="category"></h4></a> 46 </span> 47 </th> 48 <td> 49 <span class='gmap_link'> 50 <a class="i_map" target="_blank" href=""></a> 51 </span> 52 </td> 53 </tr> 54</table>

※ソースはデスクトップに保存すればそのまま動きますので挙動見ていただければ幸いです。

投稿2015/02/13 10:48

編集2015/02/13 17:05
hirumahanemui

総合スコア61

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

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

0

lang

1var htmlString = ''; 2var json = { 3 id: 'id', 4 title: 'title', 5 category: 'category', 6 address: 'address', 7 tel: 'tel', 8 business_hours: 'business_hours', 9 holiday: 'holiday' 10} 11 12htmlString = htmlString.concat( 13 '<tr>', 14 '<th>', 15 '<span>' + json['category'] + '</span>', 16 '<a href="detail.php?id=' + json['id'] + '"', 17 '<h4>' + json['title'] + '</h4>', 18 '</th>', 19 '<td>', 20 '<span class="gmap_link">', 21 '<a class="i_map" target="_blank" href="https://www.google.co.jp/maps/search/' + json['address'] + '">', 22 json['address'], 23 '</a>', 24 '</span>', 25 '</td>', 26 '<td>', 27 '<span class="txt">', 28 json['tel'], 29 '</span>', 30 '</td>', 31 '<td>', 32 '<span class="txt">', 33 json['business_hours'], 34 '</span>', 35 '</td>', 36 '<td>', 37 '<span class="txt">', 38 json['holiday'], 39 '</span>', 40 '</td>', 41 '</tr>' 42 43); 44 45$(function () { 46 $element = $('.tokyo-chuoku'); 47 $element.html(unescape(htmlString)); 48});

詳しくは知らないため「これ」とおすすめできるものはありませんが、jQuery 以外の、AngularJS などのフレームワークの導入を検討されてはいかがでしょうか

Links

投稿2015/02/13 10:22

編集2015/02/13 10:28
gouf

総合スコア2321

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

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

0

append祭りで(簡潔かどうかと言われると…)

lang

1$(".tokyo-chuoku").append(createTrData(json)); 2 3var url = "https://www.google.co.jp/maps/search/"; 4function createTrData(json){ 5 var ctd = function(value){ 6 return $('<td />').append($('<span />').addClass('txt').text(value)); 7 }; 8 return $('<tr />') 9 .append($('<th />').append($('<span />').text(json["category"])) 10 .append($('<a />').attr('href',"detail.php?id=" + json["id"] ) 11 .append($('<h4 />').text(json["title"])))) 12 .append($('<td />').append($('<span />').addClass('gmap_link').append($('<a />') 13 .addClass('i_map').attr('target','_blank').attr('href',url +json["address"]) 14 .text(json["address"])))) 15 .append(ctd(json["tel"])) 16 .append(ctd(json["business_hours"])) 17 .append(ctd(json["holiday"])); 18}

投稿2015/02/13 09:14

編集2015/02/13 09:15
sho_cs

総合スコア3541

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

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

0

まぁ、可読性とメンテナンス性を考えると、普通はこうなるかなぁ…

var tr = "\

<tr>\ <th>\ <span>:category</span>\ <a href='detail.php?id=:id'>\ <h4>:title</h4>\ </a>\ </th>\ <td>\ <span class='gmap_link'>\ <a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/:address'>:address</a>\ </span>\ </td>\ <td><span class='txt'>:tel</span></td>\ <td><span class='txt'>:business_hours</span></td>\ <td><span class='txt'>:holiday</span></td>\ </tr>\ ";

var labels = ["category", "id", "title", "address", "tel", "business_hours", "holiday" ];

for(var i in labels)
{
var label = labels[i];
var val = json[label];
tr = tr.replace(new RegExp(':' + label), val);
}

$(".tokyo-chuoku").append($(tr));

投稿2015/03/04 04:31

編集2015/03/04 04:36
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

lang

1function area(json_arg) { 2 return "<span>" + json_arg["hoge"] + "</span>"; 3} 4 5json = { "hoge" : "huga" }; 6 7$(".tokyo-chuoku").append(area(json)); 8$(".tokyo-shibuyaku").append(area(json));

投稿2015/02/28 17:38

編集2015/02/28 18:23
benzo

総合スコア35

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

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

0

この手の手法は大きく3種類で
0. テンプレートエンジンを使う
0. 文字列を配列に入れて [].join();
0. 表示上の変更される部分だけ更新する

このHTMLが絶対変更されないということでもない限り、テンプレートエンジンを使うべきだと思います。
そうでないならば、配列.join や 文字列.concat方法でいいんじゃないでしょうか。

投稿2015/02/18 07:06

umezo

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問