JS-将字符串从数据属性转换为对象

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?

Answer 1

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

Answer 2

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