PHPの連想配列をJavascriptに引き渡す方法についての記事です。
Angular.jsで構築したサイトをスピードアップしたい
Angular.js を利用したサイトは、HTMLやjavascriptの読み込みが完了した後に、Ajax でデータを取得してバインドしていきますので、HTMLの読み込みから描画が完了するまでに、ワンテンポ待ち時間が発生してしまいます。
このワンテンポの待ち時間を無くす必要にかられまして、Ajaxで読み込んでいたデータを、最初からHTML（PHPから出力）の中に埋め込んでAngular.jsに引き渡すという方法にトライしてみました。
<div ng-init="init('xxxxxxx')">
hogehoge
</div>
要は ng-initタグを通じてAngular.jsの関数に引数が渡るようにすれば良いわけです。
連想配列を渡すには Json にして渡せばOKだよねと思って実装したところ、エスケープがうまくいかず少々ハマりましたのでその方法をここに書き記しておきたいと思います。
PHPからJavascriptへデータを引き渡す方法
HTMLの中にjavascriptを埋め込む場合、HTMLの表示が崩れないようにエスケープしなければなりません。addslashesやhtmlentities、htmlspecialcharsなどPHPにはエスケープ用の関数がたくさんありますが、今回はこんな組み合わせで実現しました。
PHP側（$bind <= 引き渡したい連想配列）
<div ng-init="init('<?= rawurlencode(json_encode($bind)) ?>')">
hoghoge
</div>
Javascript側
app.controller('MainCtrl', function($scope) {
$scope.init = function(data) {
$scope.bind= angular.fromJson(decodeURIComponent(data));
}
}
- PHP : 連想配列をJSON形式のテキストデータに変換します。
- PHP : JSONデータをrawurlencode関数でエンコードします。
- PHP : ng-init のスクリプトに埋め込みます。
- Javascript : 受け取ったデータをdecodeURIComponent関数でデコードします。
- Javascript : angular.fromJson関数で連想配列に戻します。
以上で、PHP内の配列データをAngular.jsに引き渡すことが出来ました。
ホームページの制作（デザイン・コーディング・プログラミング）に加え、ネットショップの販売促進に関するアドバイスも致します。 20年以上に渡って実際にネットショップを運営した経験を生かし、聞きかじりではない実績を伴ったノウハウを、自分の言葉でお伝えいたします。 プログラミングの経験は30年以上。HTML、CSS、JavaScript、TypeScript、Vue、NuxtJS、Node.js、MySQL、MongoDB、Elasticsearch、WordPress、PHP、Docker、Electronなど、幅広く対応します。
コメント
[…] 上のソースはここのコピペです(爆) PHPから出力したHTMLから、javascriptにデータ（連想配列）を引き渡す方法 […]