web-dev-qa-db-ja.com

JavaScript配列をHTML5データ属性との間で保存および取得する

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

_JSON.stringify_ cationのすべてのバリエーションを試し、文字をエスケープしました。

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

注

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

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

javascriptjqueryarraysparsinghtml5-data
54
user1382306

要素のdata属性でhtmlエスケープ文字を使用して、jsonのような配列を作成できることがわかりました（エンコードは引用符です）。

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

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

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

これを確認してください fiddle out。

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

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

この新しい fiddle outを確認してください。

65
iurii

配列に保存しているデータの種類によって異なります。それが単なる文字列であり、あなたがknowが決してデータの一部にならない文字を持っている場合（以下の私の例のコンマのように）、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構文では、データ内の文字列を引用符で囲む必要があるためです。

46
Grinn

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

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

api documentation を確認すると、jQueryは、適切にエンコードされているJSONエンコード文字列を自動的に変換しようとする必要があります。格納している値の例を教えてください。

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

4
nullability

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

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

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

または、単一引用符を使用することもできます。

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

楽しい時間を！ ：D

3
Mateo Tibaquira

次のようなノードにオブジェクトを保存できます。

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

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