JS - converting string from data-attribute into object

Question

I have a string like:

<span class="someClass" id="skAdmin" data-options='{
   "elmsList" : {
      "#skAdmin" : {
         "action" : "replace",
         "replaceWith" : "<input class=\"form-control\">"
         }
      }
   }'>Name</span>

Now (when i make a click on this span) I need to replace this element (span) by element in data-options (input). And at the same time i need to add all span attributes to input element, but input is just a text (not an object). How can I convert this to object?

@ComFreek you don't need to a jQuery will have already done that. In memory this data-attribute will already be an object. — Rory McCrossan
– Rory McCrossan, Commented Oct 29, 2013 at 13:15
@RoryMcCrossan jQuery? JSON.parse() is not jQuery. See Sirko's answer. — ComFreek
– ComFreek, Commented Oct 29, 2013 at 13:16
@ComFreek obviously. However the OP tagged this question as jQuery and as such JSON.parse seems redundant. — Rory McCrossan
– Rory McCrossan, Commented Oct 29, 2013 at 13:20
@RoryMcCrossan I see. I didn't know that jQuery would automatically parse JSON. +1 for you. — ComFreek
– ComFreek, Commented Oct 29, 2013 at 13:21

Sirko · Accepted Answer · 2013-10-29 13:20:38Z

2

Use JSON.parse() to retrieve an object:

var obj = JSON.parse( document.querySelector( '#skAdmin' ).dataset.options );

// or

var obj = JSON.parse( document.getElementById( 'skAdmin' ).dataset.options );

Edit

As the comments note, if you are already using jQuery, all data-* attributes will already be parsed into jQuery's data object. So you can access it by just using:

var obj = $( '#skAdmin' ).data( 'options' );

edited Oct 29, 2013 at 13:20

answered Oct 29, 2013 at 13:15

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

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

3 Comments

Frédéric Hamidi Over a year ago

jQuery also exposes a parseJSON() method should all the browsers you target not support JSON.parse().

ComFreek Over a year ago

querySelector is unnecessary, use document.getElementById().

azz Over a year ago

or var obj = $('#skAdmin').data('options');

Rory McCrossan · Accepted Answer · 2013-10-29 13:17:55Z

1

You do not need to parse this value as jQuery will have already done this for you when it stored it in it's in-memory cache. Therefore you can access it like an object:

$('.someClass').click(function() {
    var replaceWith = $(this).data('options').elmsList['#skAdmin'].replaceWith;
    $(this).replaceWith(replaceWith)
});

Example fiddle

answered Oct 29, 2013 at 13:17

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Collectives™ on Stack Overflow

JS - converting string from data-attribute into object

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related