Как получить объект из data атрибута?

296

25 января 2018, 20:58

Почему когда вывожу первый раз console.log();, атрибут возвращает строку, а не объект? А если установить через JS данный атрибут, то возвращает уже объект?
Как изначально получить объект?

var data = JSON.parse( $('.js-block-obj').data('info') ); 
$('.js-block-obj').on('click', function() { 
  console.log( data); 
 
$( ".js-block-obj" ).data( "info", { b: 100, s: 0 } ); 
 
console.log( data ); 
})

.block { 
  height: 100px; 
  width: 100px; 
  margin: 2rem auto 0; 
  border: 2px solid #eaeaea; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block js-block-obj" data-info="{&quot;b&quot;: 10, &quot;s&quot;: 1}"></div>

JSON.parse не работает, выдает ошибку:

Unexpected token b in JSON at position 2

Answer 1

Если в атрибуте валидный JSON, то jQuery сам возвратит Вам объект

jQuery(function($) { 
  var data = $('.js-block-obj').data('info'); 
  $('.js-block-obj').on('click', function() { 
    console.log(data); 
 
    $(".js-block-obj").data("info", { 
      b: 100, 
      s: 0 
    }); 
 
    console.log(data); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="block js-block-obj" data-info='{&quot;b&quot;: 10, &quot;s&quot;: 1}'>Click</button>

Answer 2

Никак. data-атрибуты могут содержать только строки.
Если нужно сохранять объект, то его надо сериализовать в строку.
Например, перед сохранением делать JSON.stringify, а после чтения JSON.parse.
Получить строку можно через elem.dataset.attrName для data-attr-name="...".
Если браузер старый, то вместо dataset'а надо использовать getAttribute.
Если есть jQuery, то функцией data можно сохранять что угодно.
Dom-элементу можно как и любому другому объекту приделать собственные свойства, не связанные с атрибутами.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Безопасность куки

Объясните пожалуйста почему куки считают не безопасными? Я думаю что это вполне себе безопасная вещь, я просто хочу убедится в этомКуки по подсунутой...

287

javascript