web-dev-qa-db-ja.com

JSONデータをphpからhtml-data属性に渡し、次にJavascriptに渡す

ユーザーがHTMLの_data-_属性にカスタム設定を追加するプラグインを作成しています。設定はJSON形式です。 Javascriptでこれらの設定を使用しています。

preview、base、およびpathsプロパティがあります。 previewとbaseには文字列値がありますが、pathsはpathオブジェクトの配列です。

JSON設定をHTMLに直接追加するとうまくいきます：

_<div data-side="front" data-params='{"preview": "assets/img/products/tshirt/front-preview.png", "base": "assets/img/products/tshirt/front-base.png", "paths": "[{\"name\": \"base\", \"path\": \"M 324.00,33.00 C 324.00,33.00\", \"x\": 92, \"y\": 16, \"height\": 370}, {\"name\": \"collar\", \"path\": \"M 358.00,46.10 C 358.00,46.10\", \"x\": 170, \"y\": 17, \"height\": 21}, {\"name\": \"leftSleeve\", \"path\": \"M 633.17,170.00 C 633.17,170.00\", \"x\": 288, \"y\": 66, \"height\": 131}, {\"name\": \"leftCuff\", \"path\": \"M 595.00,438.00 C 615.47,438.23\", \"x\": 293, \"y\": 172, \"height\": 33}, {\"name\": \"rightSleeve\", \"path\": \"M 142.00,140.00 C 143.46,150.28\", \"x\": 47, \"y\": 64, \"height\": 131}, {\"name\": \"rightCuff\", \"path\": \"M 48.00,375.38 C 48.00,375.38 95.00\", \"x\": 41, \"y\": 166, \"height\": 36}]"}'>
_

JQueryのdata('Params')メソッドを使用してこの値を取得しています。そのタイプはobjectです。

今、私は_json_encode_ PHP配列を_data-_に渡そうとすると、正常に追加されます

_<div data-side="front" data-params=<?php echo "'".json_encode($dataParams)."'"; ?>>
_

ただし、Javascriptのtypeof data('Params')はstringです。だから、私はJSON解析エラーを取得しています。 pathsキーを削除すると、そのタイプはオブジェクトに変わります。

ここに私がエンコードしている配列の_print_r_があります：

_Array
(
    [preview] => assets/img/products/tshirt/front-preview.png
    [base] => assets/img/products/tshirt/front-base.png
    [paths] => Array
        (
            [0] => Array
                (
                    [name] => base
                    [path] => M 324.00,33.00 C 324.00,33.00
                    [x] => 92
                    [y] => 16
                    [height] => 370
                )
                ... and more path arrays

        )

)
_

それで、pathsキーを含めると、なぜタイプが文字列に変更されるのですか？それを解決する方法はありますか？

編集：

出力は次のとおりです。

Output

javascriptphpjqueryhtmljson
24
Kanav

データをエスケープし、特殊文字を処理する必要があります。

<div data-side="front" data-params="<?php echo htmlspecialchars(json_encode($dataParams), ENT_QUOTES, 'UTF-8'); ?>">

そして、jQueryでそれを取得します：

$('[data-side="front"]').data('params'); // object
54
Rene Korss