web-dev-qa-db-fra.com

stocker et récupérer des tableaux javascript dans et à partir d'attributs de données HTML5

Comment un javascript Array peut-il être stocké dans un attribut HTML5 data?

J'ai essayé toutes les variations de caractères JSON.stringify Et d'échappement.

Quelle est la méthode précise pour stocker le tableau et le récupérer à nouveau?

note

Je construis le tableau avec [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. Je récupère id="storageElement" data-storeIt="stuff" Avec $("#storageElement").data('storeit').

Je n'arrive jamais à récupérer les données comme un vrai Array, seulement un Array de caractères.

javascriptjqueryarraysparsinghtml5-data
54
user1382306

Il s'est avéré que vous pouviez utiliser les caractères d'échappement html de l'attribut element data pour obtenir un tableau de type json (codé par des guillemets):

<div id="demo" data-stuff='[&#34;some&#34;, &#34;string&#34;, &#34;here&#34;]'></div>

Et puis en javascript, obtenez-le sans magie supplémentaire:

var ar = $('#demo').data('stuff');

Vérifiez ceci violon out.

Édité en 2017
Il n'est pas nécessaire d'utiliser des caractères d'échappement HTML dans l'attribut data.

<div id="demo" data-stuff='["some", "string", "here"]'></div>

Vérifiez ce nouveau violon .

65
iurii

Cela dépend du type de données que vous stockez dans le tableau. Si ce ne sont que des chaînes (comme cela semble être le cas) et que vous avez un caractère qui savoir ne fera jamais partie de vos données (comme la virgule dans mon exemple ci-dessous), j'oublierais la sérialisation JSON et utilisez simplement string.split:

<div id="storageElement" data-storeIt="stuff,more stuff"></div>

Puis lors de la récupération:

var storedArray = $("#storageElement").data("storeIt").split(",");

Ce sera un peu mieux que d'utiliser JSON. Il utilise moins de caractères et est moins "cher" que JSON.parse.

Mais, si vous devez, votre implémentation JSON ressemblerait à ceci:

<div id="storageElement" data-storeIt='["hello","world"]'></div>

Et pour récupérer:

var storedArray = JSON.parse($("#storageElement").data("storeIt"));

Notez que dans cet exemple, nous avons dû utiliser des demi-guillemets (') autour du data-storeIt propriété. En effet, la syntaxe JSON nous oblige à utiliser des guillemets autour des chaînes de ses données.

46
Grinn

L'attribut de données HTML5 ne peut stocker que des chaînes. Par conséquent, si vous souhaitez stocker un tableau, vous devez le sérialiser. JSON fonctionnera et il semblerait que vous soyez sur le bon chemin. Il vous suffit d'utiliser JSON.parse() une fois les données sérialisées récupérées:

var retrieved_string = $("#storageElement").data('storeit');
var retrieved_array = JSON.parse(retrieved_string);

Lors de l'examen de la documentation de l'API , jQuery devrait essayer de convertir automatiquement une chaîne codée JSON à condition qu'elle soit correctement codée. Pouvez-vous donner un exemple de la valeur que vous stockez?

Notez également que l'attribut de données HTML5 et les méthodes jQuery .data() sont deux choses distinctes. Ils interagissent, mais jQuery est plus puissant et peut stocker n’importe quel type de données. Vous pouvez simplement stocker un tableau javascript directement à l'aide de jQuery sans le sérialiser. Mais si vous avez besoin de l'avoir dans le balisage lui-même en tant qu'attribut de données HTML5, vous êtes limité aux chaînes.

4
nullability

Pour mémoire, cela ne fonctionnait pas avec les entités encodées pour moi, mais il semble que pour être analysé en tant qu'objet, l'attribut data doit être un objet JSON bien formé.

J'ai donc pu utiliser un objet avec:

data-myarray="{&quot;key&quot;: &quot;value&quot;}"

ou peut-être simplement utiliser des guillemets simples:

data-myobject='{"key1": "value1", "key2": value2}'

Temps de s'amuser! :RÉ

3
Mateo Tibaquira

Vous pouvez stocker n'importe quel objet dans un nœud comme celui-ci:

$('#storageElement').data('my-array', ['a', 'b', 'c']);

var myArray = $('#storageElement').data('my-array');
1
kayz1