web-dev-qa-db-fra.com

Stocker un objet JSON dans un attribut de données en HTML jQuery

Je stocke des données en utilisant l'approche data- 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 ceci:

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

Cela fonctionne bien. Ce sur quoi je suis coincé, c'est d'essayer de sauvegarder l'objet au lieu d'une 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 attributs data- mais je ne peux pas stocker d'objets JSON ...

J'ai aussi essayé d'utiliser ce gosse de syntaxe sans succès:

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

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

jqueryhtmljson
113
zumzum

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

il ne sera pas réellement stocké dans le code HTML, mais si vous utilisez jquery.data, tout ce qui est résumé de toute façon.

Pour récupérer le JSON ne pas l’analyser , appelez simplement:

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

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

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

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 dans l'attribut data est automatiquement convertie en un objet JavaScript. Je ne vois pas d'inconvénient à cette approche, bien au contraire! Un attribut suffit pour stocker tout un ensemble de données, prêt à être utilisé en JavaScript via les propriétés de l'objet.

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

131
Nicolas Le Thierry d'Ennequin

Voilà comment cela a fonctionné pour moi.

Objet

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

Ensemble

Encodez l'objet sous forme de chaîne avec encodeURIComponent () et définissez-le comme attribut: 

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

Get

Pour obtenir la valeur sous forme d'objet, analysez le décodé avec decodeURIComponent () , valeur d'attribut: 

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

Pour moi, ça marche comme ça, comme je dois le stocker dans un template ...

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

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

Il est possible de résoudre de nombreux problèmes de stockage de données sérialisées 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 aucun problème. 

Jeter un coup d'œil à:

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

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

Convertir vers/de au besoin. 

6
Dan

Le truc pour moi était de ajouter des guillemets doubles autour des clés et des valeurs. Si vous utilisez une fonction php telle que json_encode, vous obtiendrez une chaîne encodée en json et une idée de la méthode pour encoder la vôtre. 

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

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

Le passage d'une chaîne JSON mal formée entraîne la génération d'une exception JavaScript. Par exemple, toutes les chaînes JSON non valides sont les suivantes:

  1. "{test: 1}" (le test n'est pas entouré de guillemets).
  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 numéro doit commencer par un chiffre; "0.1" serait valide).
  5. "undefined" (undefined ne peut pas être représenté dans une chaîne JSON; la valeur null peut cependant l'être).
  6. "NaN" (NaN ne peut pas être représenté dans une chaîne JSON; la représentation directe de l'infini est également n
3
George Donev

.data() fonctionne parfaitement dans la plupart des cas. La seule fois où j'ai eu un problème, c'est lorsque la chaîne JSON a eu un guillemet simple. Je ne trouvais pas de moyen facile de surmonter cette difficulté, j'ai donc 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>
0
Sajjan Sarkar

Pour mémoire, j'ai trouvé le code suivant fonctionne. Il vous permet de récupérer le tableau à partir de la balise de données, d'insérer un nouvel élément et de le stocker dans la balise de données au format JSON approprié. 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); stocke correctement le tableau, mais $('#my-data-div').data('namesarray', names_string); ne fonctionne 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);
0
Bazley

L'utilisation de la syntaxe jquery .data (obj) documentée vous permet de stocker un objet sur l'élément DOM. L'inspection de l'élément n'affichera pas l'attribut data- car aucune clé n'est spécifiée pour la valeur de l'objet. Cependant, les données de l'objet peuvent être référencées par la 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" }
0
user2069751

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, à l'exception du premier élément.

En guise d'alternative, j'ai fini par écrire les données sur le serveur et les analyser à nouveau si nécessaire. C'est peut-être moins efficace, mais cela a bien fonctionné pour mon objectif, car je prototype réellement des données et ne les écris pas pour la production. 

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

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

Lire ensuite les données est la même chose que la réponse acceptée, à savoir:

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

En procédant de cette façon, les données apparaissent également dans le fichier dom si je devais inspecter l'élément avec le débogueur de Chrome.

0
Shane E.

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);
0
Hp Sharma
!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...
0
Vishal Patel