2018/09/16
CakePHP3 でテーブルのデータを JavaScript に渡したい
CakePHP3 でテーブルのデータを JavaScript に渡したい機会があったので、忘れないように書き残しておきます。
環境
- CakePHP 3.6.10
コントローラの記述
今回は animals というテーブルを扱うとします。
そしてそのテーブルの name カラムにあるフィールドのデータを JavaScript に送りたいとしておきます。
まずコントローラから animals テーブルにアクセスできるようにします。
$this->Animals = TableRegistry::get('animals');次に animals テーブルから name カラムにあるフィールドのデータを引っ張ってきて配列にいれます。
$animals_name = array();
foreach($this->Animals->find('all') as $animal){
array_push($animals_name, $animal->name);
}しかし、配列だとPHPにデータを渡すことができないので、一つの文字列にしてしまいます。
今回は implode 関数をつかい CSV にします。
$animals_name_csv = implode(",", $animals_name);ではこれをビューに渡せるようにセットしておきましょう。
$this->set('animals_name_csv', $animals_name_csv);ビューの記述
ここではデータを JavaScript にテンプレートなどに追記することをまとめます。
以下のように DOM 属性にデータを書き込むように記述することで、JavaScript からデータにアクセスできるようにします。
<div type="hidden"
id="animals-name-csv"
style="display:none;"
data-val="<?=htmlspecialchars($animals_name_csv, ENT_QUOTES, 'UTF-8')?>"></div>また、その下にデータを受け取りたい JavaScript のソースを埋め込んでおきます。
<script type="text/javascript" src="script.js"></script>JavaScript の記述
JavaScript では以下のようにして DOM属性にアクセスし、データを得ることができます。
var animalsNameCsv = document.getElementById('animals-name-csv').data('val');さきほどデータをカンマ区切りにして渡しているので、以下のようにして配列に変換します。
var animalsName = animalsNameCsv.split(",");ちゃんと値を取得できているかどうかは、以下のようにコンソールにログを出してみると確認できます。
for(var i=0; i<animalsName.length; i++){
console.log(animalsName[i]);
}