Stocker l'objet JSON dans l'attribut de données dans HTML jQuery

Je stocke des données en utilisant l' data-approche dans une balise HTML comme ceci:

<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>

Je récupère ensuite les données dans un rappel comme celui-ci:

$(this).data('imagename');

Cela fonctionne très bien. Ce sur quoi je suis coincé, c'est d'essayer de sauvegarder l'objet au lieu d'une seule de ses propriétés. J'ai essayé de faire ceci:

<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>

Ensuite, j'ai essayé d'accéder à la propriété name comme ceci:

var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);

Le journal me dit undefined. Il semble donc que je puisse stocker des chaînes simples dans les data-attributs mais je ne peux pas stocker d'objets JSON ...

J'ai également essayé d'utiliser ce gamin de syntaxe sans succès:

<div data-foobar='{"foo":"bar"}'></div>

Une idée sur la façon de stocker un objet réel dans la balise HTML en utilisant l' data-approche?

au lieu de l'incorporer dans le texte, utilisez simplement $('#myElement').data('key',jsonObject);

il ne sera pas réellement stocké dans le html, mais si vous utilisez jquery.data, tout cela est de toute façon abstrait.

Pour récupérer le JSON, ne l'analysez pas , appelez simplement:

var getBackMyJSON = $('#myElement').data('key');

Si vous obtenez [Object Object]au lieu du JSON direct, accédez simplement à votre JSON par la clé de données:

var getBackMyJSON = $('#myElement').data('key').key;

En fait, votre dernier exemple:

<div data-foobar='{"foo":"bar"}'></div>

semble bien fonctionner (voir http://jsfiddle.net/GlauberRocha/Q6kKU/ ).

La bonne chose est que la chaîne de l'attribut data est automatiquement convertie en objet JavaScript. Je ne vois aucun inconvénient à cette approche, bien au contraire! Un attribut suffit pour stocker tout un ensemble de données, prêtes à être utilisées en JavaScript via les propriétés d'objet.

(Remarque: pour que les attributs de données reçoivent automatiquement le type Object plutôt que String, vous devez faire attention à écrire du JSON valide, en particulier à mettre les noms de clés entre guillemets).

Voilà comment cela a fonctionné pour moi.

Objet

var my_object ={"Super Hero":["Iron Man", "Super Man"]};

Ensemble

Encode l'objet stringifié avec encodeURIComponent () et défini comme attribut:

var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);

Avoir

Pour obtenir la valeur en tant qu'objet, analysez la valeur décodée, avec decodeURIComponent () , valeur d'attribut:

var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));

De nombreux problèmes liés au stockage des données sérialisées peuvent être résolus en convertissant la chaîne sérialisée en base64 .

Une chaîne base64 peut être acceptée à peu près n'importe où sans problème.

Jeter un coup d'œil à:

• btoa ()

La WindowOrWorkerGlobalScope.btoa()méthode crée une chaîne ASCII codée en base 64 à partir d'un objet String dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.

• a à B()

La WindowOrWorkerGlobalScope.atob()fonction décode une chaîne de données qui a été codée en utilisant un codage en base 64.

Convertissez vers / depuis si nécessaire.

Pour moi, cela fonctionne comme ça, car je dois le stocker dans un modèle ...

// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';

// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it

L'astuce pour moi était d' ajouter des guillemets doubles autour des clés et des valeurs . Si vous utilisez une fonction PHP comme json_encodecela vous donnera une chaîne encodée JSON et une idée de comment encoder correctement la vôtre.

jQuery('#elm-id').data('datakey') retournera un objet de la chaîne, si la chaîne est correctement codée en json.

Selon la documentation jQuery: ( http://api.jquery.com/jquery.parsejson/ )

La transmission d'une chaîne JSON mal formée entraîne la levée d'une exception JavaScript. Par exemple, les éléments suivants sont toutes des chaînes JSON non valides:

1. "{test: 1}"( testn'a pas de guillemets doubles autour).
2. "{'test': 1}"( 'test'utilise des guillemets simples au lieu de guillemets doubles).
3. "'test'"( 'test'utilise des guillemets simples au lieu de guillemets doubles).
4. ".1"(un nombre doit commencer par un chiffre; "0.1"serait valide).
5. "undefined"( undefinedne peut pas être représenté dans une chaîne JSON null, mais peut l'être).
6. "NaN"( NaNne peut pas être représenté dans une chaîne JSON; la représentation directe d'Infinity est également n

Combinez l'utilisation de window.btoaet window.atobavec JSON.stringifyet JSON.parse.

- Cela fonctionne pour les chaînes contenant des guillemets simples

Encodage des données:

var encodedObject = window.btoa(JSON.stringify(dataObject));

Décodage des données:

var dataObject = JSON.parse(window.atob(encodedObject));

Voici un exemple de la manière dont les données sont construites et décodées ultérieurement avec l'événement click.

Construisez le html et encodez les données:

var encodedObject = window.btoa(JSON.stringify(dataObject));

"<td>" + "<a class='eventClass' href='#' data-topic='" + encodedObject + "'>" 
+ "Edit</a></td>"

Décodez les données dans le gestionnaire d'événements click:

$("#someElementID").on('click', 'eventClass', function(e) {
            event.preventDefault();
            var encodedObject = e.target.attributes["data-topic"].value;
            var dataObject = JSON.parse(window.atob(encodedObject));

            // use the dataObject["keyName"] 
}

L'utilisation de la syntaxe documentée jquery .data (obj) vous permet de stocker un objet sur l'élément DOM. L'inspection de l'élément n'affichera pas l' data-attribut car aucune clé n'est spécifiée pour la valeur de l'objet. Cependant, les données dans l'objet peuvent être référencées par clé avec .data("foo")ou l'objet entier peut être renvoyé avec .data().

Donc, en supposant que vous configuriez une boucle et result[i] = { name: "image_name" }:

$('.delete')[i].data(results[i]); // => <button class="delete">Delete</delete>
$('.delete')[i].data('name'); // => "image_name"
$('.delete')[i].data(); // => { name: "image_name" }

Pour une raison quelconque, la réponse acceptée ne fonctionnait pour moi que si elle était utilisée une fois sur la page, mais dans mon cas, j'essayais de sauvegarder des données sur de nombreux éléments de la page et les données étaient en quelque sorte perdues sur tous sauf le premier élément.

Au lieu de cela, j'ai fini par écrire les données sur le dom et les analyser en cas de besoin. Peut-être que c'est moins efficace, mais cela a bien fonctionné pour mon objectif parce que je suis vraiment en train de prototyper des données et je n'écris pas cela pour la production.

Pour enregistrer les données que j'ai utilisées:

$('#myElement').attr('data-key', JSON.stringify(jsonObject));

Relire ensuite les données équivaut à la réponse acceptée, à savoir:

var getBackMyJSON = $('#myElement').data('key');

Cela faisait également apparaître les données dans le dom si je devais inspecter l'élément avec le débogueur de Chrome.

.data()fonctionne parfaitement dans la plupart des cas. La seule fois où j'ai eu un problème, c'était lorsque la chaîne JSON elle-même avait un guillemet simple. Je ne pouvais pas trouver de moyen facile de surmonter cela, alors j'ai eu recours à cette approche (j'utilise Coldfusion comme langage serveur):

    <!DOCTYPE html>
        <html>
            <head>
                <title>
                    Special Chars in Data Attribute
                </title>
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
                <script>
                    $(function(){
                        var o = $("##xxx");
                        /**
                            1. get the data attribute as a string using attr()
                            2. unescape
                            3. convert unescaped string back to object
                            4. set the original data attribute to future calls get it as JSON.
                        */
                        o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx"))));
                        console.log(o.data("xxx")); // this is JSON object.
                    });
                </script>
                <title>
                    Title of the document
                </title>
            </head>
            <body>
                <cfset str = {name:"o'reilly's stuff",code:1}>
<!-- urlencode is a CF function to UTF8 the string, serializeJSON converts object to strin -->
                <div id="xxx" data-xxx='#urlencodedformat(serializejson(str))#'>
                </div>
            </body>
        </html>

Pour mémoire, j'ai trouvé que le code suivant fonctionne. Il vous permet de récupérer le tableau à partir de la balise de données, de pousser un nouvel élément et de le stocker de nouveau dans la balise de données au format JSON correct. Le même code peut donc être utilisé à nouveau pour ajouter d'autres éléments au tableau si vous le souhaitez. J'ai trouvé que $('#my-data-div').attr('data-namesarray', names_string);stockait correctement le tableau, mais $('#my-data-div').data('namesarray', names_string);ne fonctionnait pas.

<div id="my-data-div" data-namesarray='[]'></div>

var names_array = $('#my-data-div').data('namesarray');
names_array.push("Baz Smith");
var names_string = JSON.stringify(names_array);
$('#my-data-div').attr('data-namesarray', names_string);

!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#btn1").click(function()
{
person = new Object();
person.name = "vishal";
person.age =20;
    $("div").data(person);
});
  $("#btn2").click(function()
{
    alert($("div").data("name"));
});

});

</script>
<body>
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div></div>
</body>


</html>

Anser:-Attach data to selected elements using an object with name/value pairs.
GET value using object propetis like name,age etc...

Ce code fonctionne bien pour moi.

Encoder des données avec btoa

let data_str = btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json', data_str);

Et puis décoder avec atob

let tourData = $(this).data("json");
tourData = atob(tourData);