JSONからHTMLに整形して表示する書き方のおすすめを教えてください

Question

JSON形式（あるいはCSV形式）のデータを加工してHTMLとしてしたいと思っています。

 {
    "pref": "東京都",
    "office": "新宿オフィス",
    "address": "東京都新宿区新宿1-1-1",
    "postal": "111-1111",
    "feature": "あいうえお"
  以下20項目（略
  },

上記のようなオブジェクトが400ほどあり、それらを整形してHTMLとして表示したいと思います。
下記のようなリンクを押した際に、400あるJSONオブジェクトから特定のものをHTMLに整形して表示します。

<a href="#">新宿オフィス</a>
<a href="#">渋谷オフィス</a>

↓

<div class="office">
<p>東京都</p>
<ul>
<li>新宿オフィス</li>
<li>東京都新宿区新宿1-1-1</li>
<li>111-1111</li>
</ul>
<p>あいうえお</p>
</div>

その際、HTMLとして整形して表示する効率のよい書き方は何がオススメですか？
オブジェクトのプロパティが20項目以上あるので、1つずつ差し込んでいくのが大変そうです＞＜
フレームワークやライブラリ、テンプレートなどおすすめのものがあれば教えてください。

Answer 1

フロントエンド側で ajaxで取得されたJsonという前提で回答するとvueJsがお勧めです。
jsonオブジェクトに対して {{変数名}} という記法でテンプレートを書くとその場所に値が埋め込まれるイメージです。
vuejsをCDNから読み込むだけで、特別にビルドツールがなくてもはじめられるのも敷居が低くてよいです。

【参考】
Vue.js：JSONファイルをAJAXで取得して表示する
このサイトは住所データを使用したサンプルなので、イメージつきやすいかと思います。

vuejs公式ガイド
日本語のドキュメントが充実しているので、わかりやすいかと思います。

Comments

[furyu]

ありがとうございます。書いていませんでしたがajaxで取得します。Vue.jsに１票なんですね！　サンプルもありがとうございます。

[euledge]

バランスの取れたとても良いフレームワークだと思います。

Answer 2

用途を考えると axios + vue.js が良さそうですね。

Comments

[furyu]

axios初耳です。調べてみます、Vue.js人気ですね！ありがとうございます。

Answer 3

modelベースでhtmlを組み立てたいならvue.jsとか使ってみるのはどうでしょうか？

Comments

[furyu]

ありがとうございます。Vue.jsは最近よく聞きますね！

Answer 4

具体的な問題ではなくて相談ですね。

JSON(or CSV)がパースできて、テンプレートエンジンがあれば、なんでもいいと思います。
使いやすさは人それぞれ、用途次第なので、ご自身で選んでください。

始める前に悩むよりまず手を動かして作ってみてください。

Comments

[mather]

「一つ一つ差し込むのが面倒」という話ですが、単純な方法ではリストかテーブルを使ってざっと一覧表示することはできますが、おそらく実際の要件では個別に表示方法などを考える必要があり一つ一つ差し込まないといけなくなります。