Задать вопрос
@tenggys
javascript

Как отобразить данные по тегам из 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>


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)
    });
};


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": "В корзину"
    }
]
  • Вопрос задан
  • 182 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript 
<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();
  });
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Поправить сайт (мобильная версия) на WordPress
24 нояб. 2024, в 04:16
5000 руб./за проект
Необходимо поменять пароль в WINDOWS
24 нояб. 2024, в 03:11
500 руб./за проект
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Ещё заказы