0

Почему когда вывожу первый раз 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

4
  • 2
    Двоеточие и кавычки пропустили 24 янв 2018 в 14:51
  • @tutankhamun, двоеточие исправил, ошибка сохранилась. Где пропустил кавычки?
    – E_K
    24 янв 2018 в 15:00
  • 1
    data-info="{&quot;b&quot;: 10, &quot;s&quot;: 1}" в JSON обязательно требуется брать в кавычки ключи полей объектов 24 янв 2018 в 15:03
  • Ээх. Уберите JSON.parse(). jQuery.data() сам разбирает JSON 24 янв 2018 в 15:20

2 ответа 2

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>

2
  • Рекомендуется вместо $(document).ready() использовать $() 24 янв 2018 в 15:30
  • @tutankhamun Спасибо. Не знал 24 янв 2018 в 15:38
1
  1. Никак. data-атрибуты могут содержать только строки.
  2. Если нужно сохранять объект, то его надо сериализовать в строку.
    Например, перед сохранением делать JSON.stringify, а после чтения JSON.parse.
  3. Получить строку можно через elem.dataset.attrName для data-attr-name="...".
  4. Если браузер старый, то вместо dataset'а надо использовать getAttribute.
  5. Если есть jQuery, то функцией data можно сохранять что угодно.
  6. Dom-элементу можно как и любому другому объекту приделать собственные свойства, не связанные с атрибутами.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.