Smartyテンプレート上からjavascriptへ連想配列を渡したいです

Question

###前提・実現したいこと
PHP(CakePHP3) + Smartyで料理レシピツールを作成しています。
やりたいこととしては、
以下のようにforeachによってaタグが並んでいるのですが、
aタグをクリックした時にonFoodNameClickイベントを通して連想配列をjs側に送りたいです。
送る方法としてはどのようなやり方があるのでしょうか？
よろしくお願いします。

<div class="foodList">
    {foreach $response.masterFood as $index => $food}
        <div class="item">
            <a id="foodInfo{$index}" class="header" onclick="OnFoodNameClick({$index});"
               data-id="{$food.id}"
               data-name="{$food.name}"
               data-description="{$food.description}">
                {$food.name}
            </a>
        </div>
    {/foreach}
</div>

PHP側のコントローラは以下のようになっております。

public function index()
{
    $masterFood   = array(0 => array("aaa", "iii"), 1 => array("aaa","iii"));
    $masterRecipe = array(0 => array("aaa", "iii"), 1 => array("aaa","iii"));
    $response = array(
        "masterFood" => $masterFood,
        "masterRecipe" => $masterRecipe,
    );
    $this->set('response', $response);
}

###試したこと

<div class="foodList">
    {foreach $response.masterFood as $index => $food}
        <div class="item">
            <a id="foodInfo{$index}" class="header" onclick="OnFoodNameClick({$index});"
               data-id="{$food.id}"
               data-name="{$food.name}"
               data-description="{$food.description}">
         data-recipe="{$masterRecipe}"  /* このようにして指定してもArrayとなってしまいダメでした */
                {$food.name}
            </a>
        </div>
    {/foreach}
</div>

Answer 1

public function index()
{
    $masterFood   = array(0 => array("aaa", "iii"), 1 => array("aaa","iii"));
    $masterRecipe = array(0 => array("aaa", "iii"), 1 => array("aaa","iii"));
    $response = array(
        "masterFood" => json_encode( $masterFood ),
        "masterRecipe" => json_encode( $masterRecipe ),
    );
    $this->set('response', $response);
}

<div class="foodList">
    {foreach $response.masterFood as $index => $food}
        <div class="item">
            <a id="foodInfo{$index}" class="header" onclick="OnFoodNameClick({$index},'{$masterRecipe}');"
               data-id="{$food.id}"
               data-name="{$food.name}"
               data-description="{$food.description}">
                {$food.name}
            </a>
        </div>
    {/foreach}
</div>

function OnFoodNameClick( i, r ) {
	var obj = JSON.parse( r );
}

【PHP: json_encode - Manual】
http://php.net/manual/ja/function.json-encode.php

【JSON.parse() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

Comments

[cas]

回答頂きまして有難うございます。
onclick="OnFoodNameClick({$index},'{$masterRecipe}');"
の '{masterRecipe}' を追記すると、クリック後以下のようなエラーがでてしまうようになってしまいました。
Uncaught SyntaxError: Invalid or unexpected token

PHP側でjson_encodeしたデータがおかしいのでしょうか。
また、$masterRecipeが多くの要素数を持つ為、foreachで指定してしまうと重くなってしまうようです。なにかうまいこと回避する方法ございませんでしょうか。

[kei344]

> OnFoodNameClick({$index},'{$masterRecipe}');"
この部分の出力結果を提示してください。

[cas]

非常に長くなってしまいますが、このようになっております。

<a id="foodInfo1" class="header" onclick="OnFoodNameClick(1, '{" 1000":{"id":1000,"name":"\u9152\u306e\u6d44\u6c34","phase":1,"description":"\u304a\u9152\u95a2\u9023\u6599\u7406\u306e\u4e3b\u306a\u6750\u6599","created_at":"2017-06-02t21:00:00","updated_at":"2017-06-02t21:00:00","deleted_at":null,"recipes":[{"id":1,"master_food_id":1000,"material_name":"\u767a\u9175\u5264","required_num":1,"material_id":0},{"id":2,"master_food_id":1000,"material_name":"\u7a40\u7269\u7c89\u985e","required_num":1,"material_id":0},{"id":3,"master_food_id":1000,"material_name":"\u30d5\u30eb\u30fc\u30c4\u985e","required_num":1,"material_id":0}]},"1001":{"id":1001,"name":"\u30c9\u30ec\u30c3\u30b7\u30f3\u30b0","phase":1,"description":"\u6599\u7406\u306e\u30b5\u30d6\u6750\u6599","created_at":"2017-06-02t21:00:00","updated_at":"2017-06-02t21:00:00","deleted_at":null,"recipes":[{"id":4,"master_food_id":1001,"material_name":"\u30aa\u30ea\u30fc\u30d6\u30aa\u30a4\u30eb","required_num":1,"material_id":0},{"id":5,"master_food_id":1001,"material_name":"\u5375","required_num":1,"material_id":0},{"id":6,"master_food_id":1001,"material_name":"\u5869","required_num":2,"material_id":0},{"id":7,"master_food_id":1001,"material_name":"\u6599\u7406\u7528\u30df\u30cd\u30e9\u30eb\u30a6\u30a9\u30fc\u30bf\u30fc","required_num":1,"material_id":0}]},
　　　　　　　　　　　// ～～データ省略～～//
"1091":{"id":1091,"name":"\u30de\u30b4\u30ea\u30a2\u6d77\u9bae\u5b9a\u98df","phase":4,"description":"90\u5206\u9593\u3001\r\n\u6700\u5927\u6240\u6301\u91cd\u91cf+50lt\r\n\u79fb\u52d5\u901f\u5ea6+2\u6bb5\u968e\r\n\u30af\u30ea\u30c6\u30a3\u30ab\u30eb\u78ba\u7387+2\u6bb5\u968e\r\n\u6700\u5927hp+100","created_at":"2017-06-02t21:00:00","updated_at":"2017-06-02t21:00:00","deleted_at":null,"recipes":[{"id":378,"master_food_id":1091,"material_name":"\u5927\u6b63\u6d77\u8001\u30b5\u30e9\u30c0","required_num":1,"material_id":1087},{"id":379,"master_food_id":1091,"material_name":"\u5927\u6b63\u6d77\u8001\u84b8\u3057","required_num":1,"material_id":0},{"id":380,"master_food_id":1091,"material_name":"\u30ab\u30ad\u306e\u30c1\u30b8\u30df","required_num":1,"material_id":1089},{"id":381,"master_food_id":1091,"material_name":"\u30ed\u30d6\u30b9\u30bf\u30fc\u30d0\u30bf\u30fc\u713c\u304d","required_num":1,"material_id":1090},{"id":382,"master_food_id":1091,"material_name":"\u679c\u5b9f\u9152","required_num":2,"material_id":1015}]}}');"="" data-food_id="1001" data-food_name="ドレッシング" data-food_description="料理のサブ材料">ドレッシング</a>

[kei344]

onclick='OnFoodNameClick({$index},`{$masterRecipe}`);'

これでどうでしょう。
そもそも別の箇所でまとめてJSONとして渡して、$indexから内容を探しに行く、という実装のほうが良いとは思います。

[cas]

素早い回答有難うございます。
Uncaught SyntaxError: Unexpected token in JSON at position 2596
at JSON.parse (<anonymous>)
at OnFoodNameClick (common.js:39)
at HTMLAnchorElement.onclick (index:66)

次はこのようなエラーでJSON.parseが失敗してしまうようです。
common.js:39は var obj = JSON.parse(recipes); このようになっております。

確かにそうですね・・・。ご助言頂きました方法で方向性を変えて実装してみたいと思います。