javascript - HTML5 データ属性との間で JavaScript 配列を格納および取得する

Question

JavaScriptをHTML5属性Arrayに格納するにはどうすればよいですか?data

JSON.stringify陽イオンとエスケープ文字のあらゆるバリエーションを試しました。

配列を保存して再度取得する正確な方法は何ですか?

ノート

で配列を構築し[ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]ます。で取得id="storageElement" data-storeIt="stuff"し$("#storageElement").data('storeit')ます。

データを true として取得することはできません。文字Arrayのみです。Array

Answer 1

element 属性で html エスケープ文字を使用して、json のような配列を作成できることが判明しましたdata(エンコードは引用符です)。

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

そして、JavaScriptで追加の魔法なしでそれを取得します:

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

このフィドルをチェックしてください。

編集済み (2017)属性
で html エスケープ文字を使用する必要はありません。data

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

この新しいフィドルをチェックしてください。

Answer 2

配列に格納するデータの種類によって異なります。それが単なる文字列 (そう見える) で、データの一部にならないことがわかっている文字(以下の例のコンマなど) がある場合は、JSON シリアライゼーションを忘れて、string.split を使用します。

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

次に、取得するとき：

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

JSON を使用するよりも処理が少し良くなります。より少ない文字を使用し、より「高価」ではありませんJSON.parse。

ただし、必要に応じて、JSON 実装は次のようになります。

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

そして取得するには：

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

この例では、プロパティを半引用符 ( ') で囲む必要があることに注意してください。data-storeItこれは、JSON 構文では、データ内の文字列を引用符で囲む必要があるためです。

Answer 3

HTML5 データ属性は文字列しか格納できないため、配列を格納する場合はシリアル化する必要があります。JSON が機能し、正しい道を進んでいるように見えます。JSON.parse()シリアル化されたデータを取得したら、次を使用するだけです。

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

API のドキュメントを確認すると、jQuery は、適切にエンコードされていれば、JSON でエンコードされた文字列を自動的に変換しようとするはずです。保存している値の例を教えてください。

.data()また、HTML5 データ属性と jQueryメソッドは 2 つの異なるものであることに注意してください。それらは相互作用しますが、jQuery はより強力で、あらゆるデータ型を格納できます。シリアル化せずに、jQuery を使用して JavaScript 配列を直接保存することができます。ただし、HTML5 データ属性としてマークアップ自体に含める必要がある場合は、文字列のみに制限されます。

Answer 4

レコードについては、エンコードされたエンティティでは機能しませんでしたが、オブジェクトとして解析するには、データ属性が整形式の JSON オブジェクトである必要があるようです。

だから私はオブジェクトを使用することができました：

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

または、一重引用符を使用するだけです:

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

楽しむ時間！:D

Answer 5

次のように、任意のオブジェクトをノードに格納できます。

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

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

Answer 6

ネストされた配列またはそれを行う別の方法が必要な場合。これは機能します：

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

Ulysse BNの提案

または、 Bonifacius Sarumpaetが 指摘した危険なソリューションである eval() を使用しますが、機能します

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