phpからjQueryへ配列データを引き渡す方法【smarty】【Laravel】【javascript】

こんにちは、コーダーのオッコです。

本日は、php側で用意したデータをjqueryで使いたいときの引き渡し方法を紹介します。

前提

使用フレームワーク

・バック：Laravel　　フロント：smarty、jQuery

やりたいこと

・Controller側で用意した配列を、jqueryで使いたい

まず単純なテキストデータの引き渡し方

//controller側　普通にviewに値を引き渡す
$hoge= "ほげ";
$fuga = 1000;
$this->view->assign('hoge', $hoge);
$this->view->assign('fuga', $fuga);


//js側
<script>
(function() {
    var hoge = '{$hoge}', // hoge = 'ほげ'
        fuga = {$fuga};   // fuga = 1000
});
</script>

tplファイルの中にjavascriptを直書きする方法です。

単純なデータならこれでいけます。

私の場合、同じように配列を渡してみたところ、何も入ってくれませんでした。

配列データの渡し方

//controller側　普通にviewに値を引き渡す
$hairetsu= [001,002,003];
$hairetsu = json_encode($hairetsu);
$this->view->assign('hairetsu', $hairetsu);


//js側
<script>
(function() {
    var hairetsu = {$hairetsu};   // hairetsu = [001,002,003]; hairetsu[1] = 002;
});
</script>

配列の場合は、jsonにエンコードし、テキスト状態にしてから引き渡します。

※配列内に文字列があると「”」でエラーが出たので、何かもう一工夫必要なようです。

以上です。

参考

https://rythgs.co/archives/2014/06/02/pass-value-to-js-from-smarty

https://www.sejuku.net/blog/23004

https://www.sejuku.net/blog/33613

[Smarty]変数・配列を定義する(assign)
↑tpl内で配列を定義する方法も試みたのですが、プラグインが必要とのことで今回は別の手法を採用しました。※smarty3ならいけそう

https://www.tohoho-web.com/ex/json.html

AIを導入しリーズナブルで確実と信頼があるホームページ制作はアピステクノロジーへ

アピステクノロジーでは、特注システム開発をはじめ、AIを導入したHPの制作にも力を入れています。

WordPressはもちろん、ShopifyのECサイトもご要望に応じて制作いたします。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら

システムの入ったパッケージ「ITツール」紹介ページはこちら

アピステクノロジーでは、IT専門家としておすすめPCの販売も行っています！