Almacene y recupere matrices de JavaScript en y desde atributos de datos HTML

¿Cómo se puede almacenar una matriz de JavaScript en un atributo de datos personalizado HTML?

He probado todas las variaciones de JSON stringification y caracteres de escape.

¿Cuál es el método preciso para almacenar la matriz y recuperarla nuevamente?

Construyo la matriz con [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. yo recupero id="storageElement" data-storeIt="stuff" con $("#storageElement").data('storeit').

Parece que nunca puedo recuperar los datos como una verdadera matriz, solo una matriz de caracteres.

Podría usar los caracteres de escape HTML en el elemento data atributo para tener una matriz similar a JSON (codificadas son comillas):

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

Y luego en JavaScript obténgalo sin ninguna magia adicional:

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

Mira esto demostración de JSFiddle.

Sin embargo, no es necesario escapar. Puedes hacer esto, en su lugar:

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

Mira esto demostración de JSFiddle.

Depende del tipo de datos que esté almacenando en la matriz. Si son solo cadenas (como parece ser) y tienes un personaje que saber nunca será parte de sus datos (como la coma en mi ejemplo a continuación), entonces me olvidaría de la serialización JSON y solo usaría string.split:

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

Luego al recuperar:

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

Se manejará un poco mejor que usar JSON. Utiliza menos caracteres y es menos “caro” que JSON.parse.

Pero, si es necesario, su implementación JSON se vería así:

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

Y para recuperar:

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

Tenga en cuenta que en este ejemplo tuvimos que usar semicomillas (') alrededor de data-storeIt propiedad. Esto se debe a que la sintaxis de JSON requiere que usemos comillas alrededor de las cadenas en sus datos.

El atributo de datos HTML5 solo puede almacenar cadenas, por lo que si desea almacenar una matriz, deberá serializarla. JSON funcionará y parece que estás en el camino correcto. Solo necesitas usar JSON.parse() una vez que recupere los datos serializados:

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

Revisando el documentación de la API, jQuery debería intentar convertir automáticamente una cadena codificada en JSON siempre que esté codificada correctamente. ¿Puede dar un ejemplo del valor que está almacenando?

También tenga en cuenta que el atributo de datos HTML5 y jQuery .data() Los métodos son dos cosas distintas. Interactúan, pero jQuery es más potente y puede almacenar cualquier tipo de datos. Simplemente puede almacenar una matriz de JavaScript directamente usando jQuery sin serializarla. Pero si necesita tenerlo en el marcado como un atributo de datos HTML5, entonces está limitado solo a cadenas.

Para el registro, no funcionó con entidades codificadas para mí, pero parece que para ser analizado como un objeto, el atributo de datos debe ser un objeto JSON bien formado.

Entonces pude usar un objeto con:

data-myarray="{"key": "value"}"

o tal vez solo use comillas simples:

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

¡Tiempo de divertirse! 😀

Puede almacenar cualquier objeto en un nodo así:

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

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

Si necesita matrices anidadas o simplemente otra forma de hacerlo. Esto funciona:

$('[data-example]').each(function (i, e) {
    var json = $(e).data('example');
  for(var index in json){
    console.log(json[index]["name"] + "=" + json[index]["value"]);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-example="[{"name": "A", "value": 1}, {"name": "B", "value": 2}]" />
<div data-example="[{"name": "C", "value": 3}, {"name": "D", "value": 4}]" />

según lo sugerido por Ulysse BN

O con eval() que es una solución peligrosa como lo señaló Bonifacius Sarumpaet pero funciona

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-example="[['A', 1], ['B', 2]]" />
<div data-example="[['C', 3], ['D', 4]]" />

<script>
  $('[data-example]').each(function (i, e) {
    var arrayFromText = eval($(e).data('example'));
    console.log(arrayFromText[0][0] + "=" + arrayFromText[0][1]);
    console.log(arrayFromText[1][0] + "=" + arrayFromText[1][1]);
  });
</script>

Si usa PHP, haga en PHP:

$arr_test = ['A','C','E'];
$coded = json_encode($arr_test);
// paste coded in data-atribute
print '<div class="funPlus" data-arr_diensten="'. $coded . '"></div>';

El HTML en inspección se parece a:

<div class="funPlus" data-arr_diensten="[&quot;A&quot;,&quot;C&quot;,&quot;E&quot;]"></div>

Ahora, en javascript, recupere la matriz, pero si solo tiene un valor, regresa como una cadena. Así que tienes que probar y arreglar esto. Si es una cadena, debemos eliminar las comillas adicionales. $(this) tiene que apuntar al objeto.

var arr_diensten = $(this).data("arr_diensten");
if (typeof arr_diensten == "string") arr_diensten = [arr_diensten.slice(1, -1)];
console.log(arr_diensten);