Problem
I’m using the data- method to store data in an HTML tag like this:
<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>
The data is then retrieved in a callback like this:
$(this).data('imagename');
That’s perfect. What I’m having trouble with is trying to save the entire object rather than just one of its characteristics. This is what I tried to do:
<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>
Then I tried to access the name property like this:
var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);
Undefined, according to the log. So it appears that I can store simple strings but not JSON objects in the data- attributes…
I’ve also attempted to use this syntactic kid without success:
<div data-foobar='{"foo":"bar"}'></div>
Any idea on how to store an actual object in the HTML tag using the data- approach?
Asked by zumzum
Solution #1
In fact, consider your most recent example:
<div data-foobar='{"foo":"bar"}'></div>
See http://jsfiddle.net/GlauberRocha/Q6kKU/ for more information.
The data- attribute’s string is automatically converted to a JavaScript object, which is convenient. I don’t see any disadvantages to this strategy; in fact, I think it’s a great idea! One attribute is enough to hold an entire set of data, which can then be accessed using object properties in JavaScript.
(Note: you must write acceptable JSON, especially enclosing the key names in double quotes, for the data- attributes to be automatically assigned the type Object rather than String.)
Answered by Nicolas Le Thierry d’Ennequin
Solution #2
Use $(‘#myElement’) instead of embedding it in the text. data(‘key’,jsonObject);
It won’t be stored in the html, but if you’re using jquery.data, that’s already abstracted.
Don’t parse the JSON to get it back; instead, call:
var getBackMyJSON = $('#myElement').data('key');
If you’re getting [Object Object] instead of raw JSON, just use the data key to get to your JSON:
var getBackMyJSON = $('#myElement').data('key').key;
Answered by nathan gonzalez
Solution #3
That’s how it went for me.
Object
var my_object ={"Super Hero":["Iron Man", "Super Man"]};
Set
Use encodeURIComponent() to encode the stringified object and set it as an attribute:
var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);
Get
Parse the decoded, attribute value: with decodeURIComponent() to get the value as an object.
var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));
Answered by Sathvik reddy Gaddam
Solution #4
Converting the serialized string to base64 solves a number of problems with storing serialized data.
A base64 string is widely recognized and can be used almost anyplace.
Take a look at the following:
As needed, convert to/from.
Answered by Dan
Solution #5
It works for me because I need to save it in a template…
// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';
// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it
Answered by molokoloco
Post is based on https://stackoverflow.com/questions/8542746/store-json-object-in-data-attribute-in-html-jquery