HTML5 data-attributes : How to modify array of data attached to DOM element?

Question

I try to modify some HTML5 data-attribute with jquery.

I know how to do when it is simple like this :

<div id="element" data-options="HelloWorld"></div>

//Modify with jQuery :
$("#element").data("options","Bye Bye");

But in my case, i would like to modify a more complexe data-options (it's a joomla module).

data-options is organized like this with an array of datas :

data-options="{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"red","popup":1},{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"blue","popup":2}"

How can i select and modify only icon for example ?

You will simply need to convert it from a string to an object using JSON parsing. The double-quotes are going to cause you grief though. — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 14, 2015 at 10:42
Ensure that you use the correct quotes, as it stands the value is invalid. — Kami
– Kami, Commented Jan 14, 2015 at 10:43
How will the JSON literal be injected into the elements? Is that server-side (if so what technology are you using server-side)? — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 14, 2015 at 10:54

Amit Joki · Accepted Answer · 2015-01-14 10:56:57Z

2

You can use the function overload of jQuery.fn.data

$('#element').data('options', function(data){
   var obj = JSON.parse(data);
   obj.forEach(function(o){
       o.icon = "some other color";
   });
   return JSON.stringify(obj);
});

The above works assuming you have the following as your data.

'[{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"red","popup":1},{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"blue","popup":2}]'

To properly declare the json, you can put 'em in '' instead of "" which will save you from the headache of escaping double quotes.

edited Jan 14, 2015 at 10:56

answered Jan 14, 2015 at 10:42

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iCollect.it Ltd · Accepted Answer · 2015-01-14 10:53:04Z

1

From comment: You will simply need to convert it from a string to an object using JSON parsing. The double-quotes are going to cause you grief though.

 var values = $.parseJSON($('#element').data('options'));

One only way to include a JSON literal in a standard HTML attribute is by encoding the "'s to "s which is pretty horrible:

e.g.

data-options=";{&quot;title&quot;:&quot;Test&quot;,&quot;lat&quot;:&quot;48.6069129&quot;,&quot;lng&quot;:&quot;7.7612831&quot;,&quot;icon&quot;:&quot;red&quot;,&quot;popup&quot;:1},{&quot;title&quot;:&quot;Test&quot;,&quot;lat&quot;:&quot;48.6069129&quot;,&quot;lng&quot;:&quot;7.7612831&quot;,&quot;icon&quot;:&quot;blue&quot;,&quot;popup&quot;:2}";

or you can use single quotes for the delimiting (while not standard this will work on most browsers):

data-options='{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"red","popup":1},{"title":"Test","lat":"48.6069129","lng":"7.7612831","icon":"blue","popup":2}'

answered Jan 14, 2015 at 10:53

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

5 Comments

Amit Joki Over a year ago

Close enough but <a data-options='json string can go here'></a>. Note that I've used a ' instead of "

iCollect.it Ltd Over a year ago

@Amit Joki: Noted with disclaimer (as that is non-standard and sometimes not possible depending on the tech used).

Sébastien Gicquel Over a year ago

I wanted to ask you to clarify your comment about the quote. Thank you for your answer, now, i understand. I didn’t code this Joomla module (widgetkit map). But I can easily replace double quote by single quote.

iCollect.it Ltd Over a year ago

@Sébastien Gicquel: In that case single quotes will do: w3.org/TR/html4/intro/sgmltut.html#h-3.2.2

equivalent8 Over a year ago

I'm ok with the &quote format it works jsfiddle.net/estuqq26/1 and if used in Rails application ERB is rendering it like that (eq8.eu/blogs/12-json-array-in-html-element-data-attribute)

Collectives™ on Stack Overflow

HTML5 data-attributes : How to modify array of data attached to DOM element?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related