时间戳

首页 > 解决方案 > 需要对 JSON 数据应用多个过滤器

javascript - 需要对 JSON 数据应用多个过滤器

问题描述

在我的项目中，我有一个由吉他及其相关数据组成的 JSON 文件。我正在尝试创建三个过滤器（品牌、类别和条件），在单击它们时立即加载相应的数据。我的功能适用于一个过滤器，但我不知道如何结合所有三个。

最初会显示所有吉他，然后在应用每个过滤器时立即过滤。我该怎么办？我意识到一系列点击过滤器是有序的，但目前完成这项工作超出了我的技能。

示例 JSON

{
    "product_id": "0",
    "category": "electric",
    "condition": "used",
    "justIn": "true",
    "brand": "gibson",
    "year": "1952",
    "code": "456def",
    "img1": "../img/sale/gibson/295-1.jpg",
    "img2": "../img/sale/gibson/295-2.jpg",
    "img3": "../img/sale/gibson/295-3.jpg",
    "img4": "../img/sale/gibson/295-4.jpg",
    "alt": "gibson guitar",
    "title": "Gibson ES-295 1952",
    "price": "6000.00",
    "description": "A beautiful ES-295 with wear you can't fake! The ES-295 was originally produced from 1952 to 1958 and is best known for being the model played by Scotty Moore with Elvis. This particular example plays well with a fantastic feeling neck! The guitar has heavy finish wear with the beautiful greening that you often see on '50s goldtops. Glaser has refretted the guitar and replaced the tailpiece crossbar. The pickguard is missing.",
    "specs": ["Body Wood - Laminated Maple",
              "Neck Wood - Mahogany",
              "Fingerboard Wood - Rosewood",
              "Scale Length - 24.75",
              "Nut Width - 1 11/16",
              "Pickup(s) - Original P-90s",
              "Case - Hard Case"
            ]
  }

过滤点击监听

  $("#collapseOne, #collapseTwo, #collapseThree").change("click", e => {
    const checkbox = e.target
    const key = e.target.getAttribute('data-name')
    const id = e.target.id

    loadWithFilter(checkbox, key, id)
  })

数据加载功能。根据我提供的 JSON，key = 品牌，value = fender

const loadWithFilter = (checkbox, key, value) => {
    $.getJSON("../../json/guitars.json", data => {

      let dataArr = data
      let filterArr = []
      let guitar_data = ""


      for(let i in dataArr) {

        // data
        const image1 = dataArr[i].img1
        const alt = dataArr[i].alt
        const title = dataArr[i].title
        const price = dataArr[i].price

        // filters
        const id = dataArr[i].product_id
        const brand = dataArr[i].brand
        const category = dataArr[i].category
        const condition = dataArr[i].condition

        if (value === brand && $(checkbox).prop("checked") == true) {
          cardElements()
        }
        if ($(checkbox).prop("checked") == false) {
          cardElements()
        }

        function cardElements() {
          guitar_data += `<div class="gallery-card" data-brand="${brand}" data-category="${category}" data-condition="${condition}">`
          guitar_data += `<img class="more-info img-fluid" src="../${image1}" alt="${alt}" data-id="${id}">`
          guitar_data += `<h6>${title}</h6>`
          guitar_data += `<p class="text-center"><strong>$ ${price}</strong></p>`
          guitar_data += '</div>'

          $('#img-gallery').html(guitar_data)
        }
      }
    })
  }

标签： javascriptjqueryjsonfilter

解决方案

您可以使用filter方法来迭代您的数据数组

const data = [{
  "product_id": "0",
  "category": "electric",
  "condition": "used",
  "justIn": "true",
  "brand": "gibson",
  "year": "1952",
  "code": "456def",
  "img1": "../img/sale/gibson/295-1.jpg",
  "img2": "../img/sale/gibson/295-2.jpg",
  "img3": "../img/sale/gibson/295-3.jpg",
  "img4": "../img/sale/gibson/295-4.jpg",
  "alt": "gibson guitar",
  "title": "Gibson ES-295 1952",
  "price": "6000.00",
  "description": "A beautiful ES-295 with wear you can't fake! The ES-295 was originally produced from 1952 to 1958 and is best known for being the model played by Scotty Moore with Elvis. This particular example plays well with a fantastic feeling neck! The guitar has heavy finish wear with the beautiful greening that you often see on '50s goldtops. Glaser has refretted the guitar and replaced the tailpiece crossbar. The pickguard is missing.",
  "specs": ["Body Wood - Laminated Maple",
    "Neck Wood - Mahogany",
    "Fingerboard Wood - Rosewood",
    "Scale Length - 24.75",
    "Nut Width - 1 11/16",
    "Pickup(s) - Original P-90s",
    "Case - Hard Case"
  ]
}]

data.filter(item => {
console.log({
  brand: item.brand,
  condition: item.condition,
  category: item.category
})
})

推荐阅读