HTML に JSON データを埋め込んで JavaScript から利用する

  • 9
    いいね
  • 0
    コメント

サーバのデータをクライアントサイドの JavaScript で扱いたいとき、API を用意して取得する方法が一般的だが、もっと簡易的な方法として HTML に JSON データを埋め込むという方法がある。

JSON を埋め込む

JSON の生成方法は利用している言語やテンプレートエンジンによって様々だが、今回は PHP で。

<script type="application/json" id="json-data">
<?php echo json_encode($data, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>
</script>

type="application/json" を指定することで JSON 文字列として埋めこむことができる。

埋め込んだ JSON を読み込んで利用する

var data = JSON.parse( document.getElementById("json-data").textContent );

先程の script エレメントの textContent プロパティから JSON 文字列が取得できるので、あとは JSON.parse() で JS オブジェクトに変換する。

別の方法との比較

よく見るのは「文字列リテラルとして埋め込む」方式。

<script type="text/javascript">
var data = JSON.parse('<?php echo json_encode($data, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>');
</script>

この方式だとグローバル変数を利用することになってしまうので微妙。

グローバルに状態を持つのであれば DOM に持たせたほうがまだマシでは、ということで <script type="application/json"> で埋め込む方式をオススメしたい。