store and retrieve javascript arrays into and from HTML5 data attributes

javascript jquery arrays parsing html5-data
user1382306 picture user1382306 · Apr 25, 2013 · Viewed 84.6k times · Source

How can a javascript Array be stored in an HTML5 data attribute?

I've tried every variation of JSON.stringifycation and escaping characters.

What is the precise method to store the array and retrieve it again?

note

I build the array with [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. I retrieve id="storageElement" data-storeIt="stuff" with $("#storageElement").data('storeit').

I can never seem to retrieve the data as a true Array, only an Array of characters.

Answer

iurii picture iurii · Dec 5, 2013

It turned out that you could use the html escaped characters in the element data attribute to have json-like array (encoded are quotes):

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

And then in javascript get it without any additional magic:

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

Check this fiddle out.

Edited (2017)
You don't need to use html escaped characters in the data attribute.

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

Check this new fiddle out.

Related questions

How to insert an item into an array at a specific index (JavaScript)?

I am looking for a JavaScript array insert method, in the style of: arr.insert(index, item) Preferably in jQuery, but any JavaScript implementation will do at this point.

Read More
Find object by id in an array of JavaScript objects

I've got an array: myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.] I'm unable to change the structure of the array. I'm being passed an id of 45, and I want to get 'bar' for that object …

Read More
How to find the sum of an array of numbers

Given an array [1, 2, 3, 4], how can I find the sum of its elements? (In this case, the sum would be 10.) I thought $.each might be useful, but I'm not sure how to implement it.

Read More