Как отобразить данные по тегам из json на странице?
Возник с трудностью с отображением нужных данных. Необходимо, что бы при активной кнопке пушились данные с конкретным тегом (При активной кнопке Франция добавлялись каточки с tag: France и т.д.), а не все.
HTML
<div class="catalog__top_box"> <button class="catalog__top_box-btn" id="btn-france">Франция</button> <button class="catalog__top_box-btn" id="btn-germany">Германия</button> <button class="catalog__top_box-btn" id="btn-england">Англия</button> </div> |
<div class="catalog__top_box"> <button class="catalog__top_box-btn" id="btn-france">Франция</button> <button class="catalog__top_box-btn" id="btn-germany">Германия</button> <button class="catalog__top_box-btn" id="btn-england">Англия</button> </div>
JS
const btnActiveFrance = document.querySelector('#btn-france'); btnActiveFrance.classList.add('active'); const btnActive = document.querySelectorAll('.catalog__top_box button'); btnActive.forEach(item => { item.addEventListener('click', () => { btnActive.forEach(e => { e.classList.remove('active'); }) item.classList.add('active'); }) }) const catalogBox = document.querySelector("#catalog-box"); getCatalog(); async function getCatalog() { const response = await fetch('catalogBox.json'); const catalogArray = await response.json(); renderBlog(catalogArray); } function renderBlog(catalogArray) { catalogArray.forEach(function (item) { const catalogHTML = ` <div class="catalog__card" id="${item.id}"> <img src="${item.img}" alt="${item.alt}" class="catalog__card_img"> <p class="catalog__card_author">${item.author}</p> <p class="catalog__card_name">${item.name}</p> <p class="catalog__card_note">${item.note}</p> <p class="catalog__card_price">${item.price}</p> <button class="catalog__card_btn">${item.btn}</button> </div> `; catalogBox.insertAdjacentHTML('beforeend', catalogHTML) }); }; |
const btnActiveFrance = document.querySelector('#btn-france'); btnActiveFrance.classList.add('active'); const btnActive = document.querySelectorAll('.catalog__top_box button'); btnActive.forEach(item => { item.addEventListener('click', () => { btnActive.forEach(e => { e.classList.remove('active'); }) item.classList.add('active'); }) }) const catalogBox = document.querySelector("#catalog-box"); getCatalog(); async function getCatalog() { const response = await fetch('catalogBox.json'); const catalogArray = await response.json(); renderBlog(catalogArray); } function renderBlog(catalogArray) { catalogArray.forEach(function (item) { const catalogHTML = ` <div class="catalog__card" id="${item.id}"> <img src="${item.img}" alt="${item.alt}" class="catalog__card_img"> <p class="catalog__card_author">${item.author}</p> <p class="catalog__card_name">${item.name}</p> <p class="catalog__card_note">${item.note}</p> <p class="catalog__card_price">${item.price}</p> <button class="catalog__card_btn">${item.btn}</button> </div> `; catalogBox.insertAdjacentHTML('beforeend', catalogHTML) }); };
JSON-файл
[ { "id": 1, "author": "Марсель Руссо", "name": "Охота Амура", "note": "Холст, масло (50х80)", "price": "14 500 руб", "img": "./img/catalog/France/France1.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 2, "author": "Анри Селин", "name": "Дама с собачкой", "note": "Акрил, бумага (50х80)", "price": "16 500 руб", "img": "./img/catalog/France/France2.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 3, "author": "Франсуа Дюпон", "name": "Процедура", "note": "Цветная литография (40х60)", "price": "20 000 руб", "img": "./img/catalog/France/France3.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 4, "author": "Луи Детуш", "name": "Роза", "note": "Бумага, акрил (50х80)", "price": "12 000 руб", "img": "./img/catalog/France/France4.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 5, "author": "Франсуа Дюпон", "name": "Птичья трапеза", "note": "Цветная литография (40х60)", "price": "22 500 руб", "img": "./img/catalog/France/France5.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 6, "author": "Пьер Моранж", "name": "Пейзаж с рыбой", "note": "Цветная литография (40х60) ", "price": "20 000 руб", "img": "./img/catalog/France/France6.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 1, "author": "Курт Вернер", "name": "Над городом", "note": "Цветная литография (40х60)", "price": "16 000 руб", "img": "./img/catalog/Germany/Germany1.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 2, "author": "Макс Рихтер", "name": "Птенцы", "note": "Холст, масло (50х80) ", "price": "14 500 руб", "img": "./img/catalog/Germany/Germany2.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 3, "author": "Мартин Майер", "name": "Среди листьев", "note": "Цветная литография (40х60)", "price": "20 000 руб", "img": "./img/catalog/Germany/Germany3.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 4, "author": "Герман Беккер", "name": "Яркая птица", "note": "Цветная литография (40х60)", "price": "13 000 руб", "img": "./img/catalog/Germany/Germany4.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 5, "author": "Вульф Бауэр", "name": "Дятлы", "note": "Бумага, акрил (50х80)", "price": "20 000 руб", "img": "./img/catalog/Germany/Germany5.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 6, "author": "Вальтер Хартманн", "name": "Большие воды", "note": "Бумага, акрил (50х80)", "price": "23 000 рубб", "img": "./img/catalog/Germany/Germany6.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 1, "author": "Пол Смит", "name": "Дикий зверь", "note": "Акварель, бумага (50х80)", "price": "19 500 руб", "img": "./img/catalog/England/England1.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 2, "author": "Джон Уайт", "name": "Скалистый берег", "note": "Цветная литография (40х60) ", "price": "17 500 руб", "img": "./img/catalog/England/England2.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 3, "author": "Джим Уотсон", "name": "Река и горы", "note": "Акварель, бумага (50х80)", "price": "20 500 руб", "img": "./img/catalog/England/England3.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 4, "author": "Юджин Зиллион", "name": "Белый попугай", "note": "Цветная литография (40х60) ", "price": "15 500 руб", "img": "./img/catalog/England/England4.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 5, "author": "Эрик Гиллман", "name": "Ночная рыба", "note": "Бумага, акрил (50х80) ", "price": "12 500 руб", "img": "./img/catalog/England/England5.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 6, "author": "Альфред Барр", "name": "Рыжий кот", "note": "Цветная литография (40х60)", "price": "21 000 руб", "img": "./img/catalog/England/England6.jpg", "alt": "img", "tag": "England", "btn": "В корзину" } ] |
[ { "id": 1, "author": "Марсель Руссо", "name": "Охота Амура", "note": "Холст, масло (50х80)", "price": "14 500 руб", "img": "./img/catalog/France/France1.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 2, "author": "Анри Селин", "name": "Дама с собачкой", "note": "Акрил, бумага (50х80)", "price": "16 500 руб", "img": "./img/catalog/France/France2.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 3, "author": "Франсуа Дюпон", "name": "Процедура", "note": "Цветная литография (40х60)", "price": "20 000 руб", "img": "./img/catalog/France/France3.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 4, "author": "Луи Детуш", "name": "Роза", "note": "Бумага, акрил (50х80)", "price": "12 000 руб", "img": "./img/catalog/France/France4.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 5, "author": "Франсуа Дюпон", "name": "Птичья трапеза", "note": "Цветная литография (40х60)", "price": "22 500 руб", "img": "./img/catalog/France/France5.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 6, "author": "Пьер Моранж", "name": "Пейзаж с рыбой", "note": "Цветная литография (40х60) ", "price": "20 000 руб", "img": "./img/catalog/France/France6.jpg", "alt": "img", "tag": "France", "btn": "В корзину" }, { "id": 1, "author": "Курт Вернер", "name": "Над городом", "note": "Цветная литография (40х60)", "price": "16 000 руб", "img": "./img/catalog/Germany/Germany1.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 2, "author": "Макс Рихтер", "name": "Птенцы", "note": "Холст, масло (50х80) ", "price": "14 500 руб", "img": "./img/catalog/Germany/Germany2.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 3, "author": "Мартин Майер", "name": "Среди листьев", "note": "Цветная литография (40х60)", "price": "20 000 руб", "img": "./img/catalog/Germany/Germany3.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 4, "author": "Герман Беккер", "name": "Яркая птица", "note": "Цветная литография (40х60)", "price": "13 000 руб", "img": "./img/catalog/Germany/Germany4.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 5, "author": "Вульф Бауэр", "name": "Дятлы", "note": "Бумага, акрил (50х80)", "price": "20 000 руб", "img": "./img/catalog/Germany/Germany5.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 6, "author": "Вальтер Хартманн", "name": "Большие воды", "note": "Бумага, акрил (50х80)", "price": "23 000 рубб", "img": "./img/catalog/Germany/Germany6.jpg", "alt": "img", "tag": "Germany", "btn": "В корзину" }, { "id": 1, "author": "Пол Смит", "name": "Дикий зверь", "note": "Акварель, бумага (50х80)", "price": "19 500 руб", "img": "./img/catalog/England/England1.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 2, "author": "Джон Уайт", "name": "Скалистый берег", "note": "Цветная литография (40х60) ", "price": "17 500 руб", "img": "./img/catalog/England/England2.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 3, "author": "Джим Уотсон", "name": "Река и горы", "note": "Акварель, бумага (50х80)", "price": "20 500 руб", "img": "./img/catalog/England/England3.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 4, "author": "Юджин Зиллион", "name": "Белый попугай", "note": "Цветная литография (40х60) ", "price": "15 500 руб", "img": "./img/catalog/England/England4.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 5, "author": "Эрик Гиллман", "name": "Ночная рыба", "note": "Бумага, акрил (50х80) ", "price": "12 500 руб", "img": "./img/catalog/England/England5.jpg", "alt": "img", "tag": "England", "btn": "В корзину" }, { "id": 6, "author": "Альфред Барр", "name": "Рыжий кот", "note": "Цветная литография (40х60)", "price": "21 000 руб", "img": "./img/catalog/England/England6.jpg", "alt": "img", "tag": "England", "btn": "В корзину" } ]
Дополнительно:
Ответы:
<button data-country="">Показать всё</button> <button data-country="France">Франция</button> <button data-country="Germany">Германия</button> <button data-country="England">Англия</button> |
<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(); }); |
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(); });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для отображения данных по тегам из JSON на странице, вам необходимо выполнить следующие шаги:
1. Получить JSON данные:
- Если данные уже есть в виде переменной, пропустите этот шаг
- Если данные нужно получить с сервера, используйте AJAX запрос или fetch API для получения JSON данных.
2. Разобрать JSON данные:
- Используйте функцию JSON.parse() для преобразования JSON строки в JavaScript объект.
3. Отобразить данные на странице:
- Создайте HTML элемент, в который будете выводить данные.
- Используйте цикл для перебора данных и формирования HTML элементов с данными.
- Для отображения данных по тегам, проверьте каждый объект на наличие нужного тега и добавьте его к соответствующему HTML элементу.
Пример кода на JavaScript:
// Пример JSON данных var jsonData = '[{"name": "John", "tags": ["tag1", "tag2"]}, {"name": "Alice", "tags": ["tag2", "tag3"]}]'; // Преобразование JSON строки в объект var data = JSON.parse(jsonData); // Получаем элемент, в который будем выводить данные var container = document.getElementById('dataContainer'); // Цикл для отображения данных data.forEach(function(item) { var itemElement = document.createElement('div'); var tags = item.tags.join(', '); // Преобразуем массив тегов в строку itemElement.innerHTML = '<strong>Name:</strong> ' + item.name + '<br><strong>Tags:</strong> ' + tags; container.appendChild(itemElement); });
Этот код представляет базовый пример того, как отобразить данные по тегам из JSON на странице. Вы можете настроить его под свои нужды, добавив стилизацию, дополнительные проверки и функциональность.