web-dev-qa-db-fra.com

Passer des données JSON de php à l'attribut html-data puis à Javascript

je crée un plugin dans lequel l'utilisateur ajoute des paramètres personnalisés dans l'attribut data- en HTML. Les paramètres sont au format JSON. J'utilise ces paramètres en Javascript.

Il a les propriétés preview, base et paths. preview et base ont des valeurs de chaîne, mais paths est un tableau d'objets path.

Cela fonctionne bien lorsque j'ajoute le paramètre JSON directement dans le 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}]"}'>

J'obtiens cette valeur en utilisant la méthode data('Params') de jQuery. Son type est object.

Maintenant, quand j'essaye de json_encode Un tableau php et le passe au data-, Il est ajouté avec succès

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

Mais maintenant, le type de data('Params') en Javascript est string. Donc, je reçois une erreur d'analyse JSON. Si j'enlève la clé paths, son type change en objet.

Voici le print_r Du tableau que j'encode:

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

        )

)

Alors, pourquoi change-t-il son type en chaîne si j'inclus la clé paths? Une façon de le résoudre?

Éditer:

Voici la sortie:

Output

javascriptphpjqueryhtmljson
24
Kanav

Vous devez échapper les données et gérer les caractères spéciaux.

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

Et obtenez-le avec jQuery:

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