Question

I’m working with jQuery’s .data() method to store some extra data on an anchor tag.

<a href="/someurl/" class="someLink" data-options="{'checkout_authentication':'create_account', 'foo':'bar'}">Link</a>

I see by the example given that I can access the data attribute like so:

$("a.someLink").data("options").foo

Where “foo” would be the name of one of the keys. That works great, but I will not always know what data attributes exist so I cannot call them specifically. I would like to not specify the name, only get the entire contents of the data-options attribute and loop through each key to build a query string.

I tried something like the following:

var dataOptions = $(this).data('options');

for(var index in dataOptions) {
    console.log(index,dataOptions[index]);
};

But that was outputting the following:

Answer 1

change your html to:

<a
  href="/someurl/"
  class="someLink"
  data-options='{"foo":"barski", "bar":"fooski"}'
>Link</a>​​​​​​​​​​​​​​​​​​​​​​​​​​

Note the change of quotes for the json string. This is needed as the only valid quotes to use is double quotes.

demo: http://jsfiddle.net/p5MGG/1/