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

Юлия

08.08.2018

Содержание:

Комментарии

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

$(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>

Возможно ли это, подскажите куда копать???

Комментарии: 3

Александр Мальцев
2018-08-12 05:05:26
Получение данных из localStorage осуществляется с помощью метода getItem:
```
var data = localStorage.getItem('myStorage');
```
Вставить данные в атрибут элемента, осуществляется на jQuery с помощью метода attr.
```
$(selector).attr('data-name',data);
```

Юлия
2018-08-12 13:41:04
Спасибо!
После вывода данных получаю ответ:
[{«Название города»:"\t\t\n\t ",«Своя надпись»:"\t\t\n\t ",«Шрифт»:"Lobster",«Размер шрифта»:"Крупный",«Ориентация»:"Книжная"}]

Возможно ли вернуть данные в виде таблицы, или представить в удобночитаемом виде, без скобок, кавычек, дивов?

Александр Мальцев

2018-08-13 16:04:19

Для этого необходимо разобрать строку с помощью JSON.parse

var dataObj = JSON.parse(data);

После этого можно перебрать свойства и представить их, так как нужно:

for (var prop in dataObj) {
  console.log('Свойство ' + prop + ' имеет значение: ' + dataObj[prop]);
}