Speichern und Abrufen von JavaScript-Arrays in und aus HTML-Datenattributen

Wie kann ein JavaScript-Array in einem benutzerdefinierten HTML-Datenattribut gespeichert werden?

Ich habe jede Variation von JSON-Stringifizierung und Escapezeichen ausprobiert.

Was ist die genaue Methode, um das Array zu speichern und wieder abzurufen?

Ich baue das Array mit [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. ich hole nach id="storageElement" data-storeIt="stuff" mit $("#storageElement").data('storeit').

Ich kann die Daten anscheinend nie als echtes Array abrufen, sondern nur als Array von Zeichen.

Sie könnten die HTML-escaped-Zeichen im Element verwenden data Attribut, um ein JSON-ähnliches Array zu haben (codiert sind Anführungszeichen):

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

Und dann in JavaScript ohne zusätzliche Magie erhalten:

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

Sieh dir das an JSFiddle-Demo.

Eine Flucht ist jedoch nicht erforderlich. Sie können stattdessen Folgendes tun:

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

Sieh dir das an JSFiddle-Demo.

Es hängt davon ab, welche Art von Daten Sie im Array speichern. Wenn es nur Zeichenfolgen sind (wie es scheint) und Sie einen Charakter haben, den Sie wissen wird niemals Teil Ihrer Daten sein (wie das Komma in meinem Beispiel unten), dann würde ich die JSON-Serialisierung vergessen und einfach string.split verwenden:

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

Dann beim Abrufen:

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

Es funktioniert etwas besser als die Verwendung von JSON. Es verwendet weniger Zeichen und ist weniger “teuer” als JSON.parse.

Aber wenn Sie müssen, würde Ihre JSON-Implementierung ungefähr so ​​​​aussehen:

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

Und zum Abrufen:

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

Beachten Sie, dass wir in diesem Beispiel Anführungszeichen verwenden mussten (') um die data-storeIt Eigentum. Dies liegt daran, dass die JSON-Syntax erfordert, dass wir die Zeichenfolgen in ihren Daten in Anführungszeichen setzen.

Das HTML5-Datenattribut kann nur Zeichenfolgen speichern. Wenn Sie also ein Array speichern möchten, müssen Sie es serialisieren. JSON wird funktionieren und es sieht so aus, als wären Sie auf dem richtigen Weg. Sie müssen nur verwenden JSON.parse() Sobald Sie die serialisierten Daten abgerufen haben:

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

Überprüfung der API-Dokumentation, sollte jQuery versuchen, eine JSON-codierte Zeichenfolge automatisch zu konvertieren, vorausgesetzt, sie ist richtig codiert. Können Sie ein Beispiel für den Wert geben, den Sie speichern?

Beachten Sie auch das HTML5-Datenattribut und jQuery .data() Methoden sind zwei verschiedene Dinge. Sie interagieren, aber jQuery ist leistungsfähiger und kann jeden Datentyp speichern. Sie könnten ein Javascript-Array einfach direkt mit jQuery speichern, ohne es zu serialisieren. Wenn Sie es jedoch im Markup selbst als HTML5-Datenattribut benötigen, sind Sie nur auf Zeichenfolgen beschränkt.

Für die Aufzeichnung hat es für mich nicht mit codierten Entitäten funktioniert, aber es scheint, dass das Datenattribut, um als Objekt geparst zu werden muss ein wohlgeformtes JSON-Objekt sein.

So konnte ich ein Objekt verwenden mit:

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

oder verwenden Sie einfach einfache Anführungszeichen:

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

Zeit zum Spaß haben! 😀

Sie können jedes Objekt so in einem Knoten speichern:

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

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

Wenn Sie verschachtelte Arrays oder nur eine andere Möglichkeit benötigen. Das funktioniert:

$('[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}]" />

wie von Ulysse BN vorgeschlagen

Oder mit eval(), das ist eine gefährliche Lösung, wie von Bonifacius Sarumpaet gezeigt, funktioniert aber

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

Wenn Sie PHP verwenden, tun Sie in 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>';

Der HTML-Code bei der Inspektion sieht folgendermaßen aus:

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

Rufen Sie jetzt in Javascript das Array ab, aber wenn es nur einen Wert hat, wird es als Zeichenfolge zurückgegeben. Sie müssen dies also testen und beheben. Wenn es sich um eine Zeichenfolge handelt, müssen wir die zusätzlichen Anführungszeichen entfernen. $(this) muss auf das Objekt zeigen.

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