Magasin d'objet JSON dans les données de l'attribut HTML jQuery

Je suis le stockage de données à l'aide de la data- approche dans une balise HTML comme ceci:

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

Je suis puis récupérer les données dans un rappel comme ceci:

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

Qui fonctionne très bien. Ce que je suis coincé à l'est d'essayer d'économiser de l'objet au lieu de simplement l'une des propriétés de l'il. J'ai essayé de faire ceci:

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

Puis j'ai essayé d'accéder à la propriété de nom comme ceci:

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

Le log me dit undefined. Donc il semble que je peux stocker des chaînes simples dans la data- attributs, mais je ne peux pas stocker des objets JSON...

J'ai aussi essayé d'utiliser ce gamin de syntaxe, pas de chance:

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

La moindre idée sur la façon de stocker un objet dans la balise HTML à l'aide de la data- approche?

InformationsquelleAutor zumzum | 2011-12-17

126

au lieu de l'intégrer dans le texte qui vient d'utilisation $('#myElement').data('key',jsonObject);

il ne sera pas effectivement être stockées dans le code html, mais si vous êtes à l'aide de jquery.de données, tout ce qui est abstrait de toute façon.

Pour obtenir le retour JSON ne pas l'analyser, il suffit d'appeler:
```
var getBackMyJSON = $('#myElement').data('key');
```
Si vous obtenez [Object Object] au lieu de direct JSON, d'accéder simplement à votre JSON par la clé de données:
```
var getBackMyJSON = $('#myElement').data('key').key;
```
- Donc, en utilisant les données de l'approche me permet de stocker la valeur de chaque bouton supprimer (chaque bouton un autre objet json...) que j'ai dans la table par se mettre dans la balise html, comme je l'ai montré ci-dessus. Est ce que vous êtes suggérant va me permettre d'associer à chaque objet avec le bouton supprimer correspondant? Comment pourrais-je faire, comment puis-je utiliser $('#myElement'). de la même manière? Désolé, je ne suis pas connu sur ce. Merci
- J'ai donc fini par l'attribution d'un index pour chaque bouton html: <td><button class='supprimer' données-index='"+i+"' >Supprimer</button></td>, et de stocker un tableau d'objets JSON en dollars des objets variables. Puis, quand on clique sur un bouton, je regarde l'index du bouton par: var buttonIndex = $(this).de données ("index"); puis-je obtenir de l'objet correspondant de la précédemment enregistré comme ceci: $objets[buttonIndex]. Cela fonctionne bien, vous ne savez pas si c'est la bonne façon de faire. Merci pour vos commentaires!
- Si le champ contient le JSON de codage PHP, vous pourriez vouloir faire cela à la place: htmlspecialchars(json_encode($e)) (idée de Nicolas réponse les commentaires).
InformationsquelleAutor nathan gonzalez
139

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 caractères dans la base de données de l'attribut est automatiquement converti en un objet JavaScript. Je ne vois pas d'inconvénient dans cette approche, au contraire! Un attribut est suffisant pour stocker un ensemble de données, prêt à l'emploi dans le code JavaScript via les propriétés de l'objet.

(Note: pour les données d'attributs pour être automatiquement le type de l'Objet plutôt que de Chaîne, vous devez être attentif à écrire JSON valide, en particulier pour joindre les noms de clé en double guillemets).
- Si ça aide quelqu'un, voici comment accéder à la ci-dessus: $('div').data('foobar').foo. api.jquery.com/data
- que faire si vous aviez deux éléments à l'intérieur du data-foobar objet et que vous vouliez supprimer un seul élément.. comment le feriez-vous?
- Une fois les données dans votre balisage a été utilisé comme un objet javascript (var foobar = $('div').data('foobar')), vous pouvez utiliser le supprimer opérateur de retirer un bien: delete foobar.foo (ou delete foobar['foo']), ou faire ce que vous voulez avec elle.
- Que faire si les données comporte un devis? ' ne fonctionne pas pour moi que je echo json_encode($array) à partir de php. Depuis qu'il mettra fin à la valeur de l'attribut par des guillemets simples. Toute suggestion, sauf s'échapper l'apostrophe manuellement à partir du tableau.?
- Juste une idée: essayer d'encodage de vos " comme &quot; (double échappement entité HTML) si elle est rendue dans votre source de ". Mais peut-être que c'est le genre de chose que vous voulez éviter quand vous dites "s'échapper l'apostrophe à la main"...
- merci pour la réponse. Je l'ai résolu en utilisant la même astuce. J'ai utilisé htmlspecialchars()[php.net/manual/en/function.htmlspecialchars.php] . Il a résolu. 🙂
- Cette solution est mieux parce que je peux définir les données trought un serveur côté de la boucle (comme un llist en PHP) et le modifier après le chargement de la page avec jquery pointillé.
- était parfait, à l'aide de jQuery .data() plus tard sur le champ renvoie l'objet de toutes les propriétés! Complètement oublié à ce sujet, des accessoires pour vous et Nicolas.
- J'ai couru dans la difficulté à utiliser cette méthode lorsque l'une des propriétés de l'objet est une chaîne de caractères contenant une apostrophe. L'attribut de données se termine à la première apostrophe rencontrés et depuis il n'est pas JSON valide, il obtient interprété comme une chaîne. Il pourrait être possible d'encoder la chaîne, mais j'ai trouvé la solution la plus simple était d'utiliser plusieurs attributs de données.
- les guillemets simples peuvent causer des problèmes, pour une solution fiable pour l'avenir la réponse mentionné le codage base64 de données...
InformationsquelleAutor Nicolas Le Thierry d'Ennequin
29

C'est la façon dont il a travaillé pour moi.

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

Coder le stringified objet avec encodeURIComponent() et de définir comme attribut:
```
var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);
```
Obtenir

Pour obtenir la valeur d'un objet, d'analyser la décodé, avec decodeURIComponent(), la valeur de l'attribut:
```
var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));
```
- A travaillé comme un charme, tu es une légende
InformationsquelleAutor Sathvik reddy Gaddam
12

Pour moi, il travail comme ça, comme j'ai besoin de le stocker dans le 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
```
- merci pour le partage..exactement ce que je cherchais...a cessé de s' [Object Object] lors de la tentative d'analyser la accepté de répondre.
- vous n'avez pas de parser le JSON de accepté de répondre, vous venez d'accéder au moyen de la touche qui est la même que le nom de données, donc si vous avez par exemple $('body').data('myData', { h: "hello", w: "world" }) _____________________________________________________________________________________________ vous souhaitez obtenir votre objet JSON par $('body').data().myData
- Pour simplifier, vous pouvez le faire '<div data-dataObj=\''+ JSON.stringify(dataObj) +'\'></div>'. Ceux sont tous les guillemets simples, le début et la fin sont juste échappé, donc ce serait la même chose que d'avoir '{"some":"thing"}'
- les adresses de la possibilité de guillemets simples figurant dans les données json, ce qui est tout à fait possible.
InformationsquelleAutor molokoloco
8

Beaucoup de problèmes de stockage de données sérialisées peut être résolu par la conversion de la chaîne sérialisée à base64.

Base64 chaîne peuvent être acceptées à peu près n'importe où, sans chichi.

Prendre un coup d'oeil à:
- btoa()
La WindowOrWorkerGlobalScope.btoa() méthode crée une codé en base 64
Chaîne de caractères ASCII à partir d'un objet de type String dans lequel chaque caractère dans la
la chaîne est traitée comme un octet de données binaires.
- atob()
La WindowOrWorkerGlobalScope.atob() fonction décode une chaîne de données
ce qui a été codé à l'aide d'encodage base 64.

La conversion, au besoin.
- Cela fonctionne vraiment bien pour passer des Objets complexes dans des attributs.
- Malheureusement, le démarrage a Unicode problème et n'est pas approprié pour toutes les langues.
InformationsquelleAutor Dan
3

Le truc pour moi c'était de ajouter des guillemets autour des clés et des valeurs. Si vous utilisez une fonction php comme json_encode vous donnera une chaîne encodée json et une idée de comment propery encoder le vôtre.

jQuery('#orme-id').de données('datakey') retournera un objet de la chaîne, si la chaîne est correctement encodé en json.

Comme par jQuery documentation: (http://api.jquery.com/jquery.parsejson/)

En passant un mal formé chaîne JSON résultats dans un JavaScript exception levée. Par exemple, les éléments suivants sont tous valides chaînes JSON:
1. "{test: 1}" (test n'a pas de guillemets autour de lui).
2. "{'test': 1}" ("test" est d'utiliser des guillemets simples au lieu de guillemets).
3. ""test" " ("test" est d'utiliser des guillemets simples au lieu de guillemets).
4. ".1" (un numéro doit commencer par un chiffre; "0.1" serait en cours de validité).
5. "undefined" (indéfini ne peut être représenté dans une chaîne JSON; null, cependant, peut être).
6. "NaN" (NaN ne peut être représenté dans une chaîne JSON; représentation directe de l'Infini est aussi n
InformationsquelleAutor George Donev
0

À l'aide de la documenté jquery .de données(obj) de la syntaxe vous permet de stocker un objet sur l'élément du DOM. L'inspection de l'élément ne sera pas le data- attribut parce qu'il n'y a pas spécifié de la valeur de l'objet. Toutefois, les données à l'intérieur de l'objet peut être référencée par la clé avec .data("foo") ou la totalité de l'objet peut être renvoyé à .data().

Donc, en supposant que vous avez mis en place 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" }
```
InformationsquelleAutor user2069751
0

Pour une raison quelconque, la accepté de répondre à fonctionné pour moi seulement si utilisé une fois sur la page, mais dans mon cas, j'ai essayé d'enregistrer des données sur de nombreux éléments sur la page et les données ont été en quelque sorte perdu sur tout sauf le premier élément.

Comme une alternative, j'ai fini par écrire les données pour les dom et l'analyser en arrière en cas de besoin. C'est peut-être moins efficace, mais bien fonctionné pour mon objectif parce que je suis vraiment prototypage de données et non pas de l'écriture de cette production.

Pour enregistrer les données que j'ai utilisé:
```
$('#myElement').attr('data-key', JSON.stringify(jsonObject));
```
De lire ensuite les données en arrière est le même que l'on a accepté la réponse, à savoir:
```
var getBackMyJSON = $('#myElement').data('key');
```
Le faisant de cette façon, les données apparaissent dans les dom, si j'étais à inspecter l'élément, le Chrome du débogueur.

InformationsquelleAutor Shane E.

.data() fonctionne parfaitement pour la plupart des cas. La seule fois où j'ai eu un problème a été lorsque la chaîne JSON lui-même avait un seul devis. Je ne pouvais pas trouver un moyen facile d'obtenir passé ce donc eu recours à cette approche (am à l'aide de Coldfusion comme langue du 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>

InformationsquelleAutor Sajjan Sarkar

0

Pour l'enregistrement, j'ai trouvé le code suivant fonctionne. Il vous permet de récupérer le tableau de la balise de données, appuyez sur un élément nouveau, et de le stocker de retour dans la balise de données dans le bon format JSON. 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); correctement les magasins de la matrice, 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);
```
InformationsquelleAutor Bazley

!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...

InformationsquelleAutor Vishal Patel

0

Ce code fonctionne très bien pour moi.

Coder les données avec btoa
```
let data_str = btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json', data_str);
```
Et puis le décoder avec atob
```
let tourData = $(this).data("json");
tourData = atob(tourData);
```
- Malheureusement, le démarrage a Unicode problème et n'est pas approprié pour toutes les langues.
InformationsquelleAutor Hp Sharma

Vous devez vous connecter pour publier un commentaire.