Работа с JSON

Dom7 — это легковесная библиотека для работы с DOM, которая предоставляет удобный API для манипуляций с элементами страницы. Несмотря на то, что Dom7 в первую очередь ориентирован на работу с элементами DOM, интеграция с данными в формате JSON позволяет строить динамические интерфейсы и облегчает взаимодействие с сервером.

Получение JSON-данных

Dom7 не содержит встроенных методов для HTTP-запросов, поэтому чаще всего JSON получают через стандартный fetch. Однако результат запроса удобно обрабатывать совместно с Dom7:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // data — объект или массив JSON
    renderData(data);
  })
  .catch(error => console.error(error));

Создание элементов на основе JSON

JSON часто используется для генерации элементов DOM динамически. Dom7 позволяет создавать элементы с помощью функции $$('<tag>') и легко вставлять их в документ.

Пример: рендер списка пользователей из массива JSON:

const users = [
  { id: 1, name: 'Алексей' },
  { id: 2, name: 'Мария' },
  { id: 3, name: 'Иван' }
];

users.forEach(user => {
  const listItem = $$('<li>').text(user.name).attr('data-id', user.id);
  $$('#user-list').append(listItem);
});

В этом примере каждый объект JSON преобразуется в элемент <li> с атрибутом data-id, что упрощает дальнейшую работу с элементами через Dom7.

Манипуляция данными JSON через атрибуты

Dom7 позволяет использовать атрибуты элементов для хранения связанной информации, часто это JSON-строка:

const item = $$('<div>')
  .attr('data-info', JSON.stringify({ id: 5, status: 'active' }));

const dataInfo = JSON.parse(item.attr('data-info'));
console.log(dataInfo.id); // 5
console.log(dataInfo.status); // 'active'

Это особенно полезно при динамическом создании элементов и необходимости хранить связанные данные без глобальных переменных.

Обновление интерфейса по JSON

Обновление элементов на странице при изменении JSON-данных выполняется через методы Dom7, такие как .text(), .html(), .attr() и .css().

Пример: обновление статуса пользователя:

const userElement = $$('li[data-id="2"]');
const userData = { status: 'inactive' };

userElement.attr('data-status', JSON.stringify(userData));
userElement.text('Мария (неактивна)');

Таким образом, JSON-данные становятся центральным источником состояния элементов DOM.

Фильтрация и поиск элементов по JSON

JSON позволяет хранить структурированную информацию, а Dom7 обеспечивает удобный доступ к элементам и их атрибутам для фильтрации и поиска:

$$('li').each(function(index, el) {
  const data = JSON.parse($$(el).attr('data-info'));
  if (data.status === 'active') {
    $$(el).addClass('highlight');
  }
});

Метод .each() позволяет проходить по всем элементам коллекции и применять логику на основе JSON-данных, например, подсвечивать активных пользователей.

Работа с вложенными структурами JSON

Сложные объекты JSON можно использовать для генерации сложного DOM. Например, список категорий с подкатегориями:

const categories = [
  {
    name: 'Фрукты',
    items: ['Яблоко', 'Банан', 'Апельсин']
  },
  {
    name: 'Овощи',
    items: ['Морковь', 'Капуста', 'Помидор']
  }
];

categories.forEach(category => {
  const catEl = $$('<div>').addClass('category');
  const title = $$('<h3>').text(category.name);
  const list = $$('<ul>');

  category.items.forEach(item => {
    list.append($$('<li>').text(item));
  });

  catEl.append(title).append(list);
  $$('#categories-container').append(catEl);
});

В этом примере JSON-структура напрямую отражается в иерархии DOM, что делает управление контентом гибким и удобным.

Сериализация DOM в JSON

Иногда необходимо преобразовать элементы DOM обратно в JSON для сохранения состояния или передачи данных на сервер:

const jsonData = [];

$$('#user-list li').each(function(index, el) {
  const element = $$(el);
  jsonData.push({
    id: element.attr('data-id'),
    name: element.text()
  });
});

console.log(JSON.stringify(jsonData));

Методы Dom7 позволяют легко обходить элементы и извлекать необходимые данные для построения JSON.

Использование событий с JSON

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

$$('#user-list').on('click', 'li', function() {
  const data = JSON.parse($$(this).attr('data-info'));
  console.log('Выбран пользователь:', data);
});

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

Резюме по работе с JSON и Dom7

  • JSON используется для хранения и передачи структурированных данных.
  • Dom7 упрощает создание, обновление и фильтрацию элементов на основе JSON.
  • Методы .attr(), .text(), .html(), .append() позволяют связывать данные с элементами.
  • События и динамические данные JSON обеспечивают интерактивность интерфейсов.
  • Обход элементов через .each() и обработка вложенных структур JSON упрощают построение сложных интерфейсов.

Эффективная интеграция JSON с Dom7 обеспечивает динамическое обновление интерфейса, минимизируя прямое вмешательство в DOM и сохраняя структуру данных чистой и управляемой.

Оглавление