Как вывести данные JSON в аттрибут data-*

Юлия
461
0
Есть загнанные в локальное хранилище данные (таблица):

$(function() {
  $('#but2').click(function() {
    var jsonArr = [];
    var obj = {};
    var thNum = document.getElementsByTagName('th').length;
    var arrLength = document.getElementsByTagName('td').length;
    for (i = 0; i < arrLength; i++) {
      if (i % thNum === 0) {
        obj = {};
      }
      var head = document.getElementsByTagName('th')[i % thNum].innerHTML;
      var content = document.getElementsByTagName('td')[i].innerHTML;
      obj[head] = content;
      if (i % thNum === 0) {
        jsonArr.push(obj);
      }
    }
    document.write("
" + JSON.stringify(jsonArr));
    localStorage.setItem('myStorage', JSON.stringify(jsonArr));
  });
});

Нужно вывести данные из хранилища в аттрибут data-name:
<button class="good-item__btn-add btn btn-info btn-sm js-add-to-cart"
    data-id="11"
    data-name="сюда вывести данные"
    data-price="1500">
    Добавить в корзину
</button>
Возможно ли это, подскажите куда копать???

Комментарии ()

  1. Александр Мальцев
    12 августа 2018, 05:05
    Получение данных из localStorage осуществляется с помощью метода getItem:
    var data = localStorage.getItem('myStorage');
    Вставить данные в атрибут элемента, осуществляется на jQuery с помощью метода attr.
    $(selector).attr('data-name',data);
    1. Юлия
      12 августа 2018, 13:41
      Спасибо!
      После вывода данных получаю ответ:
      [{«Название города»:"\t\t\n\t ",«Своя надпись»:"\t\t\n\t ",«Шрифт»:"Lobster",«Размер шрифта»:"Крупный",«Ориентация»:"Книжная"}]

      Возможно ли вернуть данные в виде таблицы, или представить в удобночитаемом виде, без скобок, кавычек, дивов?
      1. Александр Мальцев
        13 августа 2018, 16:04
        Для этого необходимо разобрать строку с помощью JSON.parse
        var dataObj = JSON.parse(data);
        После этого можно перебрать свойства и представить их, так как нужно:
        for (var prop in dataObj) {
          console.log('Свойство ' + prop + ' имеет значение: ' + dataObj[prop]);
        }
        
    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.