Неправильно ли добавлять JSON в атрибут данных HTML?

Поскольку атрибут data HTML позволяет добавлять любые пользовательские данные, мне интересно, стоит ли включать в список атрибутов data набор JSON списка? Затем соответствующий JSON может быть легко доступен с JavaScript событий JavaScript с помощью getAttribute("data-x").

На самом деле, мой вопрос таков: является ли стандартным, эффективным и разумным добавлять большой набор данных в атрибут HTML?

Например

<div data-x="A LARGE SET OF JSON DATA" id="x">

Или большой набор данных JSON должен храниться в <script>, а атрибут HTML не является подходящим местом для большого набора данных, даже для атрибута data.

Ответ 1

Вместо сохранения всего в атрибуте данных вы можете использовать идентификатор для доступа к данным.

Так, например, вы могли бы сделать это:

var myBigJsonObj = { 
                      data1 : { //lots of data}, 
                      data2 : { //lots of data}                   

                   };

а затем у вас был какой-то html:

<div data-dataId="data1" id="x">

Вы можете использовать jquery для получения данных теперь так:

var dataId = $('#x').attr('data-dataId');

var myData = myBigJsonObj[dataId];

Это лучший подход imho.

Ответ 2

Предположим, вы хотите сохранить объект var dataObj = { foo: 'something', bar: 'something else' }; в атрибут данных html.

Рассмотрим сначала строение объекта таким образом, чтобы мы имели var stringifiedDataObj = JSON.stringify(dataObj);

Затем вы можете использовать jQuery для установки stringifiedDataObj в качестве атрибута данных, например. с API jQuery.data()

Ответ 3

Пока вам нечего помещать длинную строку JSON в атрибут данных, возможно, более "правильным" способом было бы добавить один атрибут данных для каждого свойства данных JSON. например:

JavaScript:

var dataObj = { foo: 'something', bar: 'something else' }

HTML:

<div data-foo="something" data-bar="something else"></div>

Таким образом, каждая часть данных в объекте JSON соответствует отдельной, независимо доступной части данных, прикрепленной к элементу DOM.

Имейте в виду, что в любом случае вам нужно будет избежать значений, которые вы вставляете в HTML - иначе бродячие символы нарушают вашу страницу.

Ответ 4

Вы можете использовать карту. Где ваш элемент будет ключом, а значение этого ключа может быть объектом, в котором вы храните нужные данные. Примерно так (не проверено):

(function(global) {

  const map = new Map();

  global.CustomData = {
    add(element, key, data) {
      if (!map.has(element)) {
        map.set(element, {});
      }

      map.get(element)[key] = data;

      return map.get(element);
    },

    get(element, key) {
      if (!map.has(element)) {
        return null;
      }

      if (key !== undefined) {
        return map.get(element)[key];
      }

      return map.get(element)
    },

    remove(element, key) {
      if (!map.has(element)) {
        return false;
      }

      delete map.get(element)[key];

      if (Object.keys(map.get(element)).length === 0) {
        map.delete(element);
      }

      return true;
    },

    clear(element) {

      if (!map.has(element)) {
        return false;
      }

      map.delete(element);

      return true;
    }
  }

})(window);

Ответ 5

Технически вы можете, и я видел, как это делают несколько сайтов, но другое решение - сохранить ваш JSON в <script> и поместить ссылку на тег script в атрибуте data. Это лучшее решение, чем просто сохранение данных в виде объекта JS в реальном скрипте, если данные отображаются на стороне сервера страницы, но, например, существуют ограничения CSP для встроенных тегов скрипта.

HTML

<div data-data-id="#MyScriptData" id="x"></div>

<script type="application/json" id="MyScriptData">
{
    "fruit": "apple",
    ...
}
</script>

$(function () {
    var dataId = $("#x").data("data-id");
    var dataTag = $(dataId);
    var dataJson = dataTag.html(); // returns a string containing the JSON data
    var data = JSON.parse(dataJson);

    ...
});