как отфильтровать данные из json фала (вложенные категории) javascript

Question

как отфильтровать данные из json фала (вложенные категории) javascript

Рейтинг: 0Ответов: 1Опубликовано: 14.01.2023

помогите, пожалуйста, написать фильтр по свойствам с вложенными элементами) я получаю категорию "role", "language" или "level" по добавленным атрибутам data-filter, а как дальше их отфильтровать, не прописывая конкретные значения? если значения на кнопках прописаны динамически, из json-файла?

//кнопки написала на js:

const options = document.createElement("div");
          options.classList.add("options");
          card.appendChild(options);

          const buttonRole = document.createElement("button");
          buttonRole.classList.add("btn");
          buttonRole.dataset.filter = 'role';
          options.appendChild(buttonRole);
          buttonRole.innerHTML = `${el.role}`;

          const buttonLevel = document.createElement("button");
          buttonLevel.classList.add("btn");
          buttonLevel.dataset.filter = 'level';
          options.appendChild(buttonLevel);
          buttonLevel.innerHTML = `${el.level}`;

          const langArr = el.languages;
          langArr.forEach(elem => {
            const buttonLangs = document.createElement("button");
            buttonLangs.classList.add("btn");
            buttonLangs.dataset.filter = 'languages';
            options.appendChild(buttonLangs);
            buttonLangs.innerHTML = elem;
          })



///////////////
// вот так получаю категорию "role", "language" или "level" по добавленным атрибутам data-filter:

          function filters(category, items) {
        items.forEach((item) => {
          const isItemFiltered = item.classList.contains(category);
          if (isItemFiltered) {
            // тут условие
          }
        })
      }

это часть json-файла:

[
  {
    "id": 1,
    "company": "Photosnap",
    "logo": "./src/images/photosnap.svg",
    "new": true,
    "featured": true,
    "position": "Senior Frontend Developer",
    "role": "Frontend",
    "level": "Senior",
    "postedAt": "1d ago",
    "contract": "Full Time",
    "location": "USA Only",
    "languages": ["HTML", "CSS", "JavaScript"],
    "tools": []
  },
  {
    "id": 2,
    "company": "Manage",
    "logo": "./src/images/manage.svg",
    "new": true,
    "featured": true,
    "position": "Fullstack Developer",
    "role": "Fullstack",
    "level": "Midweight",
    "postedAt": "1d ago",
    "contract": "Part Time",
    "location": "Remote",
    "languages": ["Python"],
    "tools": ["React"]
  },
  {
    "id": 3,
    "company": "Account",
    "logo": "./src/images/account.svg",
    "new": true,
    "featured": false,
    "position": "Junior Frontend Developer",
    "role": "Frontend",
    "level": "Junior",
    "postedAt": "2d ago",
    "contract": "Part Time",
    "location": "USA Only",
    "languages": ["JavaScript"],
    "tools": ["React", "Sass"]
  }, ... ]

javascript json

Источник: Stack Overflow на русском

Answer 1

▲ 0

Если ответ не устраивает то скажите что в нем вам не подходит.

const json = [
  {
    "id": 1,
    "company": "Photosnap",
    "logo": "./src/images/photosnap.svg",
    "new": true,
    "featured": true,
    "position": "Senior Frontend Developer",
    "role": "Frontend",
    "level": "Senior",
    "postedAt": "1d ago",
    "contract": "Full Time",
    "location": "USA Only",
    "languages": ["HTML", "CSS", "JavaScript"],
    "tools": []
  },
  {
    "id": 2,
    "company": "Manage",
    "logo": "./src/images/manage.svg",
    "new": true,
    "featured": true,
    "position": "Fullstack Developer",
    "role": "Fullstack",
    "level": "Midweight",
    "postedAt": "1d ago",
    "contract": "Part Time",
    "location": "Remote",
    "languages": ["Python"],
    "tools": ["React"]
  },
  {
    "id": 3,
    "company": "Account",
    "logo": "./src/images/account.svg",
    "new": true,
    "featured": false,
    "position": "Junior Frontend Developer",
    "role": "Frontend",
    "level": "Junior",
    "postedAt": "2d ago",
    "contract": "Part Time",
    "location": "USA Only",
    "languages": ["JavaScript"],
    "tools": []
  }
]

// 1 Параметр функции: Массив который будет фильтровать
// 2 Параметр функции: Ключ в массиве которой будет проверяться
// 3 Параметр функции: То чему будет равен этот ключ или какие поля в себе должен содержать
function filter(array, p, isP) {
  let resultFilter
  if (isP?.length && typeof isP === 'object') {
    resultFilter = array.filter(elm => {
      if (typeof elm[p] !== 'object' || !elm[p]?.length) return false
      for (let i = 0; i < isP.length; i++) {
        if (!elm[p].find(item => item == isP[i]))
          return false
      }
      return true
    })
  } else if (typeof p === 'string' && typeof isP !== 'object') {
    resultFilter = array.filter(elm => elm[p] === isP)
  } else return false
  
  return resultFilter.length ? resultFilter : false
}

// Здесь я ищу в json елементы в которых "tools" содержит "React" и "Sass" и возвращаю их
console.log(
  filter(json, "tools", ["React"])
)

// А здесь елементы из json содержащие в "location" - "USA Only"
console.log(
  // filter(json, "location", "USA Only")
)

как отфильтровать данные из json фала (вложенные категории) javascript

Ответы