Coder Perfect

In HTML jQuery, save the JSON object in the data attribute.


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:


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: ';

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


var my_object ={"Super Hero":["Iron Man", "Super Man"]};


Use encodeURIComponent() to encode the stringified object and set it as an attribute:

var data_str = encodeURIComponent(JSON.stringify(my_object));


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