Stocker et utiliser un tableau à l'aide de la balise de données HTML et de jQuery

Question

J'essaie de stocker un tableau dans la balise de données HTML. Par exemple:

 <div data-locs="{'name':'London','url':'/lon/'},{'name':'Leeds','url':'/lds'}">

J'accède à ces données en utilisant jQuery. Je me rends compte que cela est stocké sous forme de chaîne et j'ai essayé diverses méthodes pour le convertir en tableau, mais je me suis heurté à un mur. Si vous jetez un œil à cette page jsFiddle, vous verrez un exemple complet de ce que j'essaie de faire.

http://jsfiddle.net/B4vFQ/

Des idées?

Merci!

Answer 1

Si vous utilisez un JSON valide ( [ et ] pour le tableau, guillemets doubles au lieu de simples), comme ceci :

 <div id="locations" data-locations='[{"name":"Bath","url":"/location/bath","img":"/thumb.jpg"},{"name":"Berkhamsted","url":"/location/berkhamsted","img":"/thumb.jpg"}]'>

Ensuite, ce que vous avez (en utilisant .data() ) pour obtenir le tableau fonctionnera :

 $('#locations').data('locations');

Vous pouvez le tester ici .

Answer 2

Essayez d'ajouter [ et ] au début et à la fin (cela rend le JSON valide). Après cela, vous pouvez utiliser JSON.parse() pour le convertir en un objet JavaScript natif.

Answer 3

Si, pour une raison quelconque, vous insistez pour utiliser des guillemets doubles, vous devrez encoder en html les guillemets dans votre attribut de données.

 <div data-dwarfs="[&quot;Doc&quot;, &quot;Sneezy&quot;, &quot;Happy&quot;]"></div>

Bien sûr, si vous avez accès à PHP ou à un autre préprocesseur, vous pouvez utiliser quelque chose comme ceci :

 <?php
    $dwarfs = ['Doc', 'Sneezy', 'Happy'];
?>
    <div data-dwarfs="<?php echo htmlspecialchars(json_encode($dwarfs), ENT_QUOTES, 'UTF-8') ?>"></div>
<?php

Answer 4

Essaye ça:

 var testOne = eval("new Array(" + $('#locations').data('locations') + ")");

Regardez-le dans jsfiddle .