Attribut data-* valeur format json

Bonjour à tous,
Pour un besoin, je souhaite stocker un retour json ajax dans un attribut data-*. J'ai donc ce code qui marche parfaitement pour signifier que le retour est bon :

Code:

---

1 2 3 4 5 6 7 8 9 10

$.ajax({ //*** dataType: 'json', success: function(data){ var items = data.obj for(var i in items){ $("<option/>",{value: items[i].id, html: items[i].name}).appendTo("#elt"); } } });

---

Je souhaite maintenant sauvegarder mon objet dans un dataset :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$.ajax({ //*** dataType: 'json', success: function(data){ $("#elt").data("items",data.obj); // or $("#elt").attr("data-items",data.obj); var items = $("#elt").data("items"); // or var items = $("#elt").attr("data-items"); for(var i in items){ $("<option/>",{value: items[i].id, html: items[i].name}).appendTo("#elt"); } } });

---

Pourtant c'est le même objet json que j'ai juste sauvegardé et rappelé. Pourquoi le second code ne marche pas ?

Et firebug me montre ceci :

Code:

---

<select id="elt" data-items="[object Object]">

---

l'attribut se créé bien mais comporte un tableau bizarre [object Object]

Qu'est-ce qui ne va pas ?

Merci d'avance...

Code:

---

myjson=$.parseJSON($('#obj').data('item') )

---

Citation:

---

Envoyé par SpaceFrog

Code:

---

myjson=$.parseJSON($('#obj').data('item') )

---

---

J'ai ce message d'erreur :

Citation:

---

SyntaxError: JSON.parse: unexpected character

---

Merci d'avance...

Il y a de fortes chances que ton JSON soit tout simplement mal formé.
Il ressemble à quoi ?

c'est que le contenu de dta-item n'est pas un string json correctement formatté

Code:

---

data-item="{'key1':'data1', 'key2':'data2'}"

---

Code:

---

"{'key1':'data1', 'key2':'data2'}"

---

:nono:
Ce n'est pas un format valide pour du JSON justement. Le seul délimiteur accepté pour les attributs et les valeurs est la double quote : " ;)

Code:

---

'{"key1":"data1", "key2":"data2"}'

---

:red:
sinon suffit de faire un replace sur la chaine...

bref mais pas un array en tout état de cause []

voici un modèle json de retour de success ajax

Code:

---

1 2	{"obj":[{"id":"49","name":"Dja et Lobo"},{"id":"50","name":"Mvila"},{"id":"51","name":"Oc\u00e9an"},{"id":"52","name":"Vall\u00e9e du Ntem"}]}

---

depuis firebug.

et tu les mets ou ce retour ???
quel rapport avec data-item ??

Code:

---

1 2 3 4 5 6 7 8 9 10 11

$.ajax({ //*** dataType: 'json', success: function(data){ $("#elt").data("items",JSON.stringify(data.obj)); var items = $.parseJSON($("#elt").data("items")); for(var i in items){ $("<option/>",{value: items[i].id, html: items[i].name}).appendTo("#elt"); } } });

---

Ce code marche, mais un autre souci surgit. IE et JSON.stringify().
Que faire ?

????
quel est le souci avec stringify ???

concatène toi même le json

Citation:

---

Envoyé par SpaceFrog

????
quel est le souci avec stringify ???

---

Il ne marche pas avec IE < 8.

Citation:

---

Envoyé par SpaceFrog

concatène toi même le json

---

Je ne comprends pas.

dis nous plutoy ce que tu cherches à faire avec ton stringify ??
tu l'utilises ou et pour faire quoi ?

Citation:

---

Envoyé par SpaceFrog

concatène toi même le json

---

Mon json est généré en php avec

Code:

---

echo json_encode($temp_array);

---

C'est du json mal formaté ?

Citation:

---

Envoyé par SpaceFrog

dis nous plutoy ce que tu cherches à faire avec ton stringify ??
tu l'utilises ou et pour faire quoi ?

---

Le code ci-haut n'est que pour tester un retour ajax json et l'insérer dans un attribut data-* pour utilisation plutard.

Pour mon besoin réel, pour limiter beaucoup de transaction ajax, je fais juste une requête ajax et je sauvegarde des infos dans data-* pour utilisation future. Cela augmenterait la vitesse de l'appli. Je pense.

Merci.

Ce que je ne comprends pas, ce sont les messages de Firebug...

Citation:

---

Et firebug me montre ceci :

Code:

---

<select id="elt" data-items="[object Object]">

---

l'attribut se créé bien mais comporte un tableau bizarre [object Object]

---

qui est incohérent avec $(element).data(...).
J'imagine que tu as plutôt utilisé $(element).attr(...) qui n'a aucun intérêt dans ce contexte.

Ce qu'il faut savoir, c'est que jQuery récupère automatiquement les attributs HTML data-xxx pour les transformer en objet data interne. Mais une fois la page chargée, créer ce type d'attribut ne peut qu'être problématique...
Les propriétés data de jQuery et les dataset ne sont pas exactement la même chose.

Code:

---

1 2 3

$('body').data('toto', 'foo'); document.body.dataset.toto = 'bar'; console.log(document.body.dataset.toto, $('body').data('toto'));

---

Personnellement, je n'ai jamais eu de souci avec cette façon de faire :koi:

Citation:

---

Envoyé par okoweb

Code:

---

1 2 3 4

$("#elt").data("items",JSON.stringify(data.obj)); var items = $.parseJSON($("#elt").data("items")); ;

---

Ce code marche, mais un autre souci surgit. IE et JSON.stringify().
Que faire ?

---

J'ai l'impression qu'il y a une petite confusion entre $.data()
et l'attribut data-items

avec $("#elt").data("items", qqch); Jquery associe un hash avec elt et tu peux
mettre ce que tu veux dedans. Il n'y a pas besoin de sérialiser ton json pour le
stocker avec $.data()

Ceci devrait suffir:

Code:

---

1 2 3

$("#elt").data("items", data.obj); var items = $("#elt").data("items");

---

Par contre si tu voulais fixer l'attribut data-items, tu devrais sérialiser et
écrire qqch du genre: $("#elt").attr("data-items",JSON.stringify(data.obj));
Ce qui n'a pas grand intérêt coté client.

Si du coté PHP tu renvoie du json dans un fragment html, alors cela
ressemblerait à ceci:

Code:

---

1 2 3

$json = json_encode($obj); echo "<div id='#elt' data-items='$json'>"; // en escapant les caractères tels que "

---

Coté js alors, tu devrais evaluer ton json avec qqch du genre:

Code:

---

1 2	var items = $.parseJSON($("#elt").attr("data-items"));

---

EDIT: Merci bovino, je découvre l'automatisme de jquery pour rendre accessible les attributs data-xxx avec la fonction $.data('xxx')

Code:

---

1 2	$("#elt").data("items", data.obj); var items = $("#elt").data("items");

---

Exactement ce code marche parfaitement bien. J'avais testé j'ai eu une erreur. Maintenant ça marche, pourtant bien mon code initial.

Merci à vous tous.:ccool: