Как можно отобразить информацию, содержащуюся в формате JSON, с использованием тегов на web-странице?

Question

Милан

javascript

Как можно отобразить информацию, содержащуюся в формате JSON, с использованием тегов на web-странице?

Как настроить отображение данных с определенным тегом при активации соответствующей кнопки, вместо отображения всех данных?

12 февраля 2024 г. 12:49

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для отображения данных в формате JSON на веб-странице с использованием тегов, вы можете использовать JavaScript (или фреймворки, такие как React, Angular, Vue). Ниже приведен пример, который показывает, как это можно сделать при помощи чистого JavaScript.

1. Получите данные JSON, например, из API или локального файла.

2. Разберите данные JSON с помощью `JSON.parse()`, если они в формате строки.

3. Вставьте полученные данные в HTML, используя DOM API.

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

Вот простой пример HTML и JavaScript кода, демонстрирующий это:

HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Data Display</title>
</head>
<body>

<div id="data-container"></div>

<button id="filter-button">Показать только 'tag1'</button>

<script src="script.js"></script>
</body>
</html>
```

JavaScript (script.js):
```javascript
// Допустим, у вас есть JSON в виде строки или полученный с сервера
const jsonData = `[
  {"name": "Элемент1", "tag": "tag1"},
  {"name": "Элемент2", "tag": "tag2"},
  {"name": "Элемент3", "tag": "tag1"}
]`;

// Функция для отображения данных
function displayData(data) {
  const container = document.getElementById('data-container');
  container.innerHTML = ''; // Очистить предыдущие данные
  data.forEach(item => {
    const div = document.createElement('div');
    div.textContent = item.name;
    container.appendChild(div);
  });
}

// Функция для фильтрации по тегу
function filterDataByTag(tag) {
  const parsedData = JSON.parse(jsonData);
  // Фильтрация элементов, которые имеют определенный тег
  const filteredData = parsedData.filter(item => item.tag === tag);
  // Отобразить отфильтрованные данные
  displayData(filteredData);
}

// Получите кнопку и навесьте обработчик клика
const button = document.getElementById('filter-button');
button.addEventListener('click', () => filterDataByTag('tag1'));

// Отображение всех данных при загрузке страницы
displayData(JSON.parse(jsonData));
```

Таким образом, когда пользователь кликает на кнопку "Показать только 'tag1'", выполняется фильтрация данных по тегу 'tag1' и отображаются только соответствующие элементы.

Если же вы бы хотели сделать ваш интерфейс более интерактивным и позволять выбирать разные теги для фильтрации, вы можете добавить небольшой интерфейс с select или радиокнопками для выбора тега. После чего обработчик события на эти элементы управления будет вызывать функцию `filterDataByTag` с выбранным значением тега.

Answer 2

<button data-country="">Показать всё</button>
<button data-country="France">Франция</button>
<button data-country="Germany">Германия</button>
<button data-country="England">Англия</button>
 
 const catalogEl = document.querySelector('#catalog-box');
let catalogArr = [];

const buttons = document.querySelectorAll('button[data-country]');
buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  buttons.forEach(n => n.classList.toggle('active', n === t));
  renderCatalog(t.dataset.country);
}

function renderCatalog(country) {
  const toRender = country
    ? catalogArr.filter(n => n.tag === country)
    : catalogArr;

  catalogEl.innerHTML = toRender
    .map(n => `
      <div class="catalog__card" id="${n.id}">
        <img src="${n.img}" alt="${n.alt}" class="catalog__card_img">
        <p class="catalog__card_author">${n.author}</p>
        <p class="catalog__card_name">${n.name}</p>
        <p class="catalog__card_note">${n.note}</p>
        <p class="catalog__card_price">${n.price}</p>
        <button class="catalog__card_btn">${n.btn}</button>
      </div>`)
    .join('');
}

fetch('catalogBox.json')
  .then(r => r.json())
  .then(r => {
    catalogArr = r;
    buttons[0].click();
  });